时间戳

首页 > 解决方案 > 无法按元素索引号更改 JQuery lightSlider Slides

javascript - 无法按元素索引号更改 JQuery lightSlider Slides

问题描述

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

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

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

尝试单击其中一个徽标并使滑块显示徽标的幻灯片编号时，我遇到了控制台错误 nth:child clicked。获取子编号非常有用，.index(this) + 1); 但使滑块显示幻灯片编号“索引 + 1 幻灯片”只能工作一次，如果我再试一次，控制台会显示 Uncaught TypeError: Cannot read property '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);

标签： javascripthtmljquerycssslider

解决方案

你的代码有点乱。我做了很多更改，但希望当您<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在此块中声明，因此undefined如果不先执行 else 块，则变为。提供slider全局参考可以解决问题。这个解决方案很糟糕，但我没有时间深入研究那个 jQuery 扩展来找到最佳解决方法。

其次，在玩了你的页面一段时间后，我发现它的行为goToPrevSlide()和goToNextSlide()方法并不像预期的那样。因此，我在按钮next和prev.

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

推荐阅读