无法按元素索引号更改 JQuery lightSlider 幻灯片

Question

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

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

好吧，在第 1 部分的末尾，有 4 个徽标。每当单击其中一个徽标时，都会弹出一个模态窗口，其中包含一个滑块（JQuery lightSlider）。

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

关于如何解决这个问题有什么想法吗？我考虑过重置 slider.goToSlide(slide_n); 功能，但老实说不知道该怎么做 :(

提前致谢！


$(".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);

Answer 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 获得 class lightSlider 后执行，即第一次单击其中一个徽标时。但是 slider 是在这个块中声明的，因此如果没有先执行 else 块，它就会变成 undefined 。给 slider 一个全局引用就解决了这个问题。这个解决方案很糟糕，但我没有时间深入研究 jQuery 扩展来找到最佳解决方法。

其次，在浏览了您的页面一段时间后，我发现 goToPrevSlide() 和 goToNextSlide() 方法的行为与预期有些出入。因此，我在按钮 next 和 prev.

的回调中编辑了对这些方法的调用

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

无法按元素索引号更改 JQuery lightSlider 幻灯片

Can't change JQuery lightSlider Slides by element index number

html

javascript

css

jquery

slider