无法通过元素索引号更改 JQuery lightSlider Slides

Posted 2023-05-08

【中文标题】无法通过元素索引号更改 JQuery lightSlider Slides

【英文标题】：Can't change JQuery lightSlider Slides by element index number

【发布时间】：2021-04-02 15:35:52

【问题描述】：

我正在构建这个页面： https://yuyotest.000webhostapp.com/design.html

代码还没有准备好，我还在用脚本的位置测试一些如此简单的东西哈哈。

问题是在第 1 部分的末尾，有 4 个徽标。每当单击其中一个徽标时，都会弹出一个带有滑块（JQuery lightSlider）的模态框。

尝试单击其中一个徽标并使滑块显示第 n 个徽标的幻灯片编号时出现控制台错误：单击的子项。使用.index(this) + 1); 获取孩子号码非常有用 但是让滑块显示幻灯片编号“index+1 slide”只能工作一次，如果我再试一次，控制台会显示 Uncaught TypeError: Cannot read property 'goToSlide' of undefined。

关于如何解决这个问题的任何想法？我想过重置slider.goToSlide(slide_n);function，但老实说不知道该怎么做:(

提前致谢！

$(".design-logos").click(function() 

        var slide_n = ($('.design-logos').index(this) + 1);
        

        if ($("#light-slider").hasClass("lightSlider")) 
            
         else 
            var slider = $("#light-slider").lightSlider(
                item: 1,
                loop: true,
                speed: 1,
                enableDrag: false,
            );
             

        slider.goToSlide(slide_n);

【参考方案1】：

你的代码有点乱。我做了很多更改，但希望当您将页面中第四个 <script></script> 标记中的代码替换为以下代码时它会起作用：

var slider;
            $(document).ready(function() 


            // modal in // 

            function modalIn() 

                $(".jp-modal-wrapper").show();
                $('body').addClass("body-ovf");

                setTimeout(function() 

                    $(".projects-main-slider").addClass("projects-main-slider-in");

                    $('.blackdrop').addClass("blackdrop-in");

                    setTimeout(function() 
                        $('.jp-inner-modal').addClass("jp-inner-modal-in");
                    , 350);

                    $('.carousel-item.active img').lazy(
                        effect: "fadeIn",
                        effectTime: 1000,
                        threshold: 0
                    );

                , 10);

            ;


            // modal off //

            function modalOff() 

                $('.jp-inner-modal').removeClass("jp-inner-modal-in");

                setTimeout(function() 
                    $('.blackdrop').removeClass("blackdrop-in");
                , 500);

                setTimeout(function() 
                    $(".jp-modal-wrapper").hide();
                    $('body').removeClass("body-ovf");
                , 1000);

            ;

            $(".blackdrop").click(function() 
                modalOff();
            );

            $('body').keydown(function(e) 
                if (e.keyCode == 27) 
                    modalOff();
                
            );

            // modal off //
            
                

            $(".design-logos").click(function() 

                var slide_n = ($('.design-logos').index(this) + 1);                
                

                // modal in //                     
                modalIn();

                setTimeout(function() 


                    if ($("#light-slider").hasClass("lightSlider")) 
                        
                     else 
                        slider = $("#light-slider").lightSlider(
                            item: 1,
                            loop: true,
                            speed: 1,
                            enableDrag: false,
                        );
                    

                                  
                    setTimeout(function()      
                    slider.goToSlide(slide_n);

                , 301);

                //else

            , 5);

            function fadeSlideIn() 
                    $(".next").addClass("disable-button");
                    $(".projects-main-slider").addClass("projects-main-slider-mov");
            

                function fadeSlideOut() 
                    $(".next").removeClass("disable-button");
                    $(".projects-main-slider").removeClass("projects-main-slider-mov");
                

                $(".gotoslide").click(function () 

                    slider.goToSlide(2);
                );





            $(".next").click(function () 
                    fadeSlideIn();
                    const curSliderInd = slider.getCurrentSlideCount();
                    const nextSlide = curSliderInd == 4 ? 1 : curSliderInd + 1;
                    setTimeout(function () 
                        let curSliderInd = slider.getCurrentSlideCount();
                        slider.goToSlide(nextSlide);
                    , 301);
                    setTimeout(function () 
                        fadeSlideOut();
                    , 302);
            );

            $(".prev").click(function () 
                    fadeSlideIn();
                    const curSliderInd = slider.getCurrentSlideCount();
                    const nextSlide = curSliderInd == 1 ? 4 : curSliderInd - 1;
                    setTimeout(function () 
                        
                        slider.goToSlide(nextSlide);
                    , 301);
                    setTimeout(function () 
                        fadeSlideOut();
                    , 302);
                );
            );






        );

对您的代码的评论：

首先，你的代码失败了，因为 else 块

if ($("#light-slider").hasClass("lightSlider")) 
            
         else 
            var slider = $("#light-slider").lightSlider(
                item: 1,
                loop: true,
                speed: 1,
                enableDrag: false,
            );
        

一旦元素light-slider 获得类lightSlider，即第一次点击其中一个徽标时，则不会执行。但是slider 是在这个块中声明的，因此如果没有先执行 else 块，它就会变成undefined。给slider 一个全局引用解决了这个问题。这个解决方案很讨厌，但我没有时间深入研究那个 jQuery 扩展来找到最佳解决方法。

其次，在玩了你的页面一段时间后，我发现goToPrevSlide() 和goToNextSlide() 方法的行为并不像预期的那样。因此，我在按钮next 和prev 的回调中编辑了对这些方法的调用。

第三，您已将一些回调定义放入setTimeout！也许这仅仅是由于粗心大意，我还是把它们打开了。格式还有其他缺陷，我没有时间更正。您可能需要纠正他们以避免他们以后的报复。

【讨论】：

非常感谢，我真诚地感谢您的时间和帮助！！！是的，我知道这是一团糟哈哈，除了我是一个 js 新手，我正在努力弄清楚这些功能！我完全不明白如何为滑块提供全局参考，我将不得不查看有关该信息的信息。喜欢你如何编辑 next 和 prev 的调用！最后，我设置了 setTimeout 回调以防止动画干扰光滑块事件。但我正在处理你所有的 cmets 和警告！所以再次感谢你真的帮了我很多！ ♥