Javascript не работает в Dreamweaver - PullRequest
Новая
       11

Javascript не работает в Dreamweaver

0 голосов
/ 08 июня 2018

Я изучаю Dreamweaver.

У меня есть Dreamweaver CC 2016, я пытался использовать код в своем тестовом проекте.

Я получил код здесь: codepen.io/KnYem/ pen / JdjWxG

Я поставил ссылку на кодовую ручку, потому что вопрос имел ограничение в 30000 символов.

Я использую коды HTML и CSS в Dreamweaver, и они работают нормально.Страница и стили загружаются как ссылки, но проблема заключается в JavaScript.

Это КОД JavaScript: 

jQuery(document).ready(function($) {
  //on mobile - open/close primary navigation clicking/tapping the menu icon
  $('.cd-primary-nav').on('click', function(event) {
    if ($(event.target).is('.cd-primary-nav')) $(this).children('ul').toggleClass('is-visible');
  });

  //upload videos if not on mobile
  uploadVideo($('.cd-hero-slider'));

  //change visible slide
  $('.cd-slider-nav li').on('click', function(event) {
    event.preventDefault();
    var selectedItem = $(this);
    if (!selectedItem.hasClass('selected')) {
      // if it's not already selected
      var selectedPosition = selectedItem.index(),
        activePosition = $('.cd-hero-slider .selected').index();
      if (activePosition < selectedPosition) {
        nextSlide($('.cd-hero-slider'), $('.cd-slider-nav'), selectedPosition);
      } else {
        prevSlide($('.cd-hero-slider'), $('.cd-slider-nav'), selectedPosition);
      }

      updateNavigationMarker(selectedPosition + 1);
    }
  });

  function nextSlide(container, pagination, n) {
    var visibleSlide = container.find('.selected'),
      navigationDot = pagination.find('.selected');

    visibleSlide.removeClass('selected from-left from-right').addClass('is-moving').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function() {
      visibleSlide.removeClass('is-moving');
    });

    container.children('li').eq(n).addClass('selected from-right').prevAll().addClass('move-left');
    navigationDot.removeClass('selected')
    pagination.find('li').eq(n).addClass('selected');

    checkVideo(visibleSlide, container, n);
  }

  function prevSlide(container, pagination, n) {
    var visibleSlide = container.find('.selected'),
      navigationDot = pagination.find('.selected');

    visibleSlide.removeClass('selected from-left from-right').addClass('is-moving').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function() {
      visibleSlide.removeClass('is-moving');
    });

    container.children('li').eq(n).addClass('selected from-left').removeClass('move-left').nextAll().removeClass('move-left');
    navigationDot.removeClass('selected');
    pagination.find('li').eq(n).addClass('selected');

    checkVideo(visibleSlide, container, n);
  }

  function uploadVideo(container) {
    container.find('.cd-bg-video-wrapper').each(function() {
      var videoWrapper = $(this);
      if (videoWrapper.is(':visible')) {
        // if visible - we are not on a mobile device 
        var videoUrl = videoWrapper.data('video'),
          video = $('<video loop><source src="' + videoUrl + '.mp4" type="video/mp4" /><source src="' + videoUrl + '.webm" type="video/webm" /></video>');
        video.appendTo(videoWrapper);
      }
    });
  }

  function checkVideo(hiddenSlide, container, n) {
    //check if a video outside the viewport is playing - if yes, pause it
    if (hiddenSlide.find('video').length > 0) hiddenSlide.find('video').get(0).pause();

    //check if the select slide contains a video element - if yes, play the video
    if (container.children('li').eq(n).find('video').length > 0) container.children('li').eq(n).find('video').get(0).play();
  }

  function updateNavigationMarker(n) {
    $('.cd-marker').removeClassPrefix('item').addClass('item-' + n);
  }

  $.fn.removeClassPrefix = function(prefix) {
    //remove all classes starting with 'prefix'
    this.each(function(i, el) {
      var classes = el.className.split(" ").filter(function(c) {
        return c.lastIndexOf(prefix, 0) !== 0;
      });
      el.className = $.trim(classes.join(" "));
    });
    return this;
  };
});

Я пытался добавить скрипт с помощью этого кода: 

<script src="js/main.js"></script>

Скрипт загружается в верхнюю строку Dreamweaver, но он не работает, ничего не происходит ...

Что я делаю не так?

Что не работает: анимация и скольжение не работаютслучается

1 Ответ

0 голосов
/ 10 июня 2018

Вы можете запустить код в реальном времени в Dreamweaver, нажав кнопку Live .То, как вы задаете этот вопрос, кажется, что вы все еще редактируете код.Вам нужно переключить его на Live, чтобы увидеть его в действии.Хотя Dreamweaver может дать вам представление о том, как работают определенные аспекты кода, не рекомендуется делать это ВСЕ время.Вам нужно проверить работу в реальном браузере, чтобы определить, что работает, а что нет.

Я предлагаю вам прочитать документацию и учебные пособия для Dreamweaver, потому что пока этоочень полезный инструмент, вам нужно знать, как правильно его использовать.

...