Javascript 未在 Dreamweaver 中启动

Question

我正在学习 Dreamweaver。

我有dreamweaver CC 2016，我尝试在我的测试项目中使用代码。

我从这里得到代码： codepen.io/KnYem/pen/JdjWxG

I put codepen link because the question had 30000 character limit.

我在 Dreamweaver 中使用 HTML 和 CSS 代码，它们工作正常。页面和样式作为参考加载，但问题是 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 的顶行但它不起作用，没有任何反应...

我做错了什么？

什么不起作用：动画和滑动不会发生

Answer 1

您可以运行通过按 Live 按钮在 Dreamweaver 中直播代码。你问这个问题的方式，好像你还在编辑代码。您需要将其切换到 Live 才能看到它的运行情况。虽然 Dreamweaver 可以让您深入了解代码的某些方面是如何工作的，但不建议这样做 ALL 时间。您需要通过实际浏览器检查正在进行的工作，以确定哪些有效，哪些无效。

我建议您阅读 documentation and tutorials for Dreamweaver，因为虽然它是一个非常有用的工具，但您需要知道如何正确使用它。

Javascript 未在 Dreamweaver 中启动

Javascript not firing in dreamweaver

html

javascript

jquery

dreamweaver