jQuery与wordpress中的jquery冲突

Question

我已经为网站构建了主页，并且我的类别滑块工作正常，一旦我在 wordpress 中构建了网站并添加了分层滑块插件，我的类别滑块就停止工作了..

这里是网站http://www.fiestapaints.co.uk/new/

我认为这是这两个 jquery 之间的冲突，但我无法更改图层滑块（第一个 jquery 代码），因为它是一个相当复杂的插件..

如果有人可以帮助我，那就太好了，提前谢谢你

<script pagespeed_orig_type="text/javascript" type="text/psajs" orig_index="9">
jQuery(document).ready(function () {
      jQuery("#layerslider_1").layerSlider({
          width: '940px',
          height: '395px',
          responsive: false,
          responsiveUnder: 0,
          sublayerContainer: 0,
          autoStart: true,
          pauseOnHover: false,
          firstLayer: 1,
          animateFirstLayer: false,
          randomSlideshow: false,
          twoWaySlideshow: true,
          loops: 0,
          forceLoopNum: true,
          autoPlayVideos: true,
          autoPauseSlideshow: 'auto',
          youtubePreview: 'maxresdefault.jpg',
          keybNav: true,
          touchNav: true,
          skin: 'minimal',
          skinsPath: 'http://www.fiestapaints.co.uk/new/wp-content/plugins/LayerSlider/skins/',
          globalBGColor: 'transparent',
          navPrevNext: true,
          navStartStop: true,
          navButtons: true,
          hoverPrevNext: true,
          hoverBottomNav: false,
          thumbnailNavigation: 'hover',
          tnWidth: 100,
          tnHeight: 60,
          tnContainerWidth: '60%',
          tnActiveOpacity: 35,
          tnInactiveOpacity: 100,
          imgPreload: true,
          yourLogo: false,
          yourLogoStyle: 'left: 10px; top: 10px;',
          yourLogoLink: false,
          yourLogoTarget: '_self',
          cbInit: function (element) {},
          cbStart: function (data) {},
          cbStop: function (data) {},
          cbPause: function (data) {},
          cbAnimStart: function (data) {},
          cbAnimStop: function (data) {},
          cbPrev: function (data) {},
          cbNext: function (data) {}
      });
});
</script>

和

<script pagespeed_orig_type="text/javascript" type="text/psajs" orig_index="3">
  jQuery(document).ready(function () {
      jQuery('#mycarousel').
      jcarousel({
          auto: 2,
          wrap: 'last',
          initCallback: mycarousel_initCallback
      });
  });

  function mycarousel_initCallback(carousel) {
      carousel.buttonNext.bind('click', function () {
          carousel.startAuto(0);
      });
      carousel.buttonPrev.
      bind('click', function () {
          carousel.startAuto(0);
      });
      carousel.clip.hover(function () {
              carousel.stopAuto();
          },
          function () {
              carousel.startAuto();
          });
  };
</script>

Answer 1

pagespeed type=text/psajs pagespeed 将通过创建 onload 事件来延迟这些 javascript。但是，onload 在 document.ready 之后触发...

所以你的代码的操作顺序是……

document.ready 触发

onload 触发运行你的脚本并连接到 document.ready

document ready 已经触发，所以对 ready 的调用将立即执行

所以在加载过程中

1. layerslider 函数被调用
2. 调用了 jcarousel 函数，该函数试图指向未定义的回调
3. initcallback 已定义

在调用jquery ready jcarousel之前，你需要在onload期间定义initcallback和任何其他回调或服务函数

<script pagespeed_orig_type="text/javascript" type="text/psajs" orig_index="3">
  function mycarousel_initCallback(carousel) {
    carousel.buttonNext.bind('click', function () {
      carousel.startAuto(0);
    });
    carousel.buttonPrev.
    bind('click', function () {
      carousel.startAuto(0);
    });
    carousel.clip.hover(function () {
          carousel.stopAuto();
    },
    function () {
        carousel.startAuto();
    });
  };

  jQuery(document).ready(function () {
    jQuery('#mycarousel').
    jcarousel({
      auto: 2,
      wrap: 'last',
      initCallback: mycarousel_initCallback
    });
  });

</script>

此外，在这段代码的上下文中，jquery 就绪是完全多余的。您可以将其删除，然后直接拨打电话。