Jquery代码在一个页面上有效，在另一个页面上无效

Question

我有一个包含 jquery 代码的文件，我将其连接到两个不同的页面，因为一个页面的代码的一部分，另一页面的代码的一部分。但是第二页的代码不起作用，并且 jquery 在第一页的代码中抛出错误。但是使用相同的代码在第一页上没有错误。 第二页错误:

Uncaught TypeError: $(...).slick is not a function
    at runSlick (script.js:15)
    at HTMLDocument.<anonymous> (script.js:19)
    at mightThrow (jquery-3.2.1.js:3583)
    at process (jquery-3.2.1.js:3651)

jquery:

$(document).ready(function () {

    //CODE FOR THE FIRST PAGE
    //Main Slider
    var maxWidth = 992,
        slickVar = {
            dots: true,
            responsive: [
                {
                    breakpoint: maxWidth,
                    settings: 'unslick'
                }
            ]
        },
        runSlick = function() {
            $('.sl').slick(slickVar);
        };

// slick initialization while document ready
    runSlick();

// listen to jQuery's window resize
    $(window).on('resize', function(){
        var width = $(window).width();
        if(width < maxWidth) {
            // reinit slick while window's width is less than maximum width (992px)
            runSlick();
        }
    }).resize();

    //hide slider elements if window's width is less than maximum width (992px)
    $(window).on('resize', function(){
    if ($(this).width() < maxWidth) {
        $('.hidden').addClass('d-none');
    } else {
        $('.hidden').removeClass('d-none');
    }
}).resize();

    //Slider in clients section
    $('.sl-2').slick({
        infinite: true,
        slidesToShow: 7,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 1500,
        responsive: [
            {
                breakpoint: 1024,
                settings: {
                    slidesToShow: 3,
                    slidesToScroll: 3,
                    infinite: true,
                    autoplay: true,
                    autoplaySpeed: 1500
                }
            },
            {
                breakpoint: 600,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 2
                }
            },
            {
                breakpoint: 480,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1,
                    autoplay: true,
                    autoplaySpeed: 1500
                }
            }
        ]

    });

    //show image on hover over features-list element
    $('.features-list li>.feature-top').hover(
        function() {
            $(this).find('.top-wrapper').addClass('d-none');
            $(this).css({
                'padding': '0',
                'background-color': '#f5f5f5'
            });
            $(this).find('.hover-content').fadeIn('slow');
        },
        function() {
            $(this).find('.top-wrapper').removeClass('d-none');
            $(this).css({
                'padding': '20px 0',
                'background-color': '#ffea00'
            });
            $(this).find('.hover-content').fadeOut(50);
        }
    );

    //Isotope in works section
     $('.grid').isotope({
        // main isotope options
        itemSelector: '.grid-item',
        masonry: {
            columnWidth: 15,
            isFitWidth: true
        }
    });
//END OF CODE FOR THE FIRST PAGE

//CODE FOR THE SECOND PAGE
        $(".portfolio-menu-link").click(function () {
            $(".portfolio-menu-link").removeClass("active-portfolio-link");
            $(this).addClass("active-portfolio-link");
        });
});

Answer 1

I have slick() only on the first page and don't have it on another. Is it means that I need to have another jquery file for second page?

是的。当您引用它时，包含 jQuery 代码的任何页面都将需要它。事实上，它没有在页面上使用是无关紧要的。 jQuery 引用了它，因此需要加载它。

如果您想首先检查您调用 Slick Slider 的元素是否存在于 DOM 中(以避免必须将每个页面的 jQuery 分成多个文件)，您可以这样做:

var $sl2 = $('.sl-2');
if ($sl2.length) {
  $sl2.slick({ 
    infinite: true,
    // settings...
  });
}