脚本停止执行其他代码(slitslider) [英] Script stops the execution of other code (slitslider)

问题描述

我有以下脚本，但是当我移至没有#slider的页面时，它破坏了其下方的代码，我尝试执行的操作是检查#slider是否在页面上，否则返回但它没有用，我收到此错误. 未被捕获的TypeError:对象[object Object]没有方法'slitslider'

I have the following script, but when i move to a page that don't have #slider breaks the code that is below it, what i tried to do is check if the #slider is on the page otherwise just return but it didn't work i'm getting this error. Uncaught TypeError: Object [object Object] has no method 'slitslider'

指向本节slitslider = $( '#slider' ).slitslider( {

(function ($) {
  if ($('#slider')) {
    var Page = (function () {
      var $navArrows = $('#nav-arrows'),
        $nav = $('#nav-dots > span'),
        slitslider = $('#slider').slitslider({
          autoplay: true,
          onBeforeChange: function (slide, pos) {

            /**
             * THIS SECTION MANAGES THE TRIANGLE COLORS EVERY TIME THE SLIDER BACKGROUND CHANGES SO DOES THE TRIANGLE.
             */
            //get the colors of each slide
            //and set it that color to the bottom-triangle.
            var newpos = pos;
            ++newpos;
            var triangleColor = $('.bg-' + newpos + ' .sl-slide-inner').css('backgroundColor');
            $('.expertise-triangle').css('border-color', triangleColor + ' transparent transparent transparent');
            /**
             * THIS SECTION HANDLES THE DOT NAVIGATIONS ON TOP OF THE TRIANGLES.
             */

            $nav.removeClass('nav-dot-current');
            $nav.eq(pos).addClass('nav-dot-current');
          }
        }),
        init = function () {
          initEvents();
        },
        initEvents = function () {
          // add navigation events
          $navArrows.children(':last').on('click', function () {
            slitslider.next();
            return false;
          });
          $navArrows.children(':first').on('click', function () {
            slitslider.previous();
            return false;
          });
          $nav.each(function (i) {
            $(this).on('click', function (event) {
              var $dot = $(this);
              if (!slitslider.isActive()) {
                $nav.removeClass('nav-dot-current');
                $dot.addClass('nav-dot-current');
              }
              slitslider.jump(i + 1);
              return false;
            });
          });
        };
      return {
        init: init
      };
    })();
    Page.init();
  } else {
    return;
  }
})(jQuery);

推荐答案

实际上，您可能有一个称为#slider的dom元素，但没有在该页面上包含相应的splitslider插件.另外，您还需要检查数组的长度，因为$()总是返回一个数组，而一个空数组(如果没有匹配项)也是正确的. 这就是错误Object [object Object](您的滑块元素)has no method 'slitslider'(缺少splitslider功能)的原因.

Actually you might have an dom-element called #slider but don't have included the according slitslider plugin on that page. Also you need to check the length of the array, because $() always returns an array and an empty array (if there is no match) is also truthy. That's why the error Object [object Object] (your slider element) has no method 'slitslider' (missing slitslider function.)

您需要检查if($('#slider').length && $().slitslider )来防止这种情况.

You need to check if($('#slider').length && $().slitslider ) to prevent that.

这篇关于脚本停止执行其他代码(slitslider)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！