Question

我已经研究了很多帖子，但我仍然没有找到解决方案，所有滑块盒（一个clickDown（）点击的盒子）与 $同时打开（＆＃39; [id ^ =＆＃34; sliderbox - ＆＃34;]＆＃39;）或者我只是不明白如何将jquery代码专门应用于我的滑块。

这是我的代码：

$( "#open2" ).click(function () {
                if ( $( "#sliderbox2" ).is( ":hidden" ) ) {
                    $( "#sliderbox2" ).slideDown( "slow" );
                    $( ".arrow2").delay(300).fadeIn(500);
                    $(".balken2").delay(500).fadeIn(500);
                    $( "#sliderbox" ).slideUp( "slow" );
                    $( ".arrow" ).fadeOut(100);
                    $( ".balken" ).fadeOut(100);                
                    var y = $(window).scrollTop();  //your current y position on the page
                    $('html, body').animate({
                        scrollTop: y+150
                    },500);
                } else {
                    $( "#sliderbox2" ).slideUp( "slow" );
                    $( ".arrow2" ).fadeOut(100);
                    $( ".balken2" ).fadeOut(100);
                }
});

我猜你已经可以看到＆＃34; 2＆＃34;因为这是要打开的第二个滑块，还有滑块的箭头和按钮中的粗边框。我有20个滑块，我不想重复使用css和jquery代码20次！

这是html：

<img src="images/pfeilunten2.png" class="pfeilunten" style="margin-left:0;" id="open3"/>
    <div id="sliderbox3" class="sliderbox">
            <div id="carousel">

                <div id="carousel_inner">
                <ul id="carousel_ul3" class="carousel_ul">
                <div id="zentriercarousel">
                    <li>...</li>
                </div>
                </ul>
                </div>
                <div class="scroll_left scroll">
                <a href="javascript:slide3('left');"> <img src="images/arrowleft.png" class="arrow3"  /> </a></div>
                <div class="scroll_right scroll">
                <a href="javascript:slide3('right');"> <img src="images/arrowright.png" class="arrow3" /> </a>
                </div>
                <input id="hidden_auto_slide_seconds" type="hidden" value="0" />
                <div class="balken3"></div>
            </div>
            </div>

你可以看到Ans，已经有第三个滑块的代码，我必须重命名一切。真的很糟糕！非常感谢您的帮助，请提前回复此代码，具体说明！

Answer 1

我接近这个的方法是给所有打开滑块的链接一个类，比如说“打开”，我会给它们所有的数据滑块属性，如下所示：

<a href="#" class="open" data-slider="2">Open Slider</a>

你的jquery函数可以变得通用：

$( ".open" ).click(function () {
                 var sliderNumber = $(this).data("slider");
                 if ( $( "#sliderbox" + sliderNUmber ).is( ":hidden" ) ) {
                    $( "#sliderbox" + sliderNUmber ).slideDown( "slow" );
                    $( ".arrow" + sliderNUmber).delay(300).fadeIn(500);
                    $(".balken" + sliderNUmber).delay(500).fadeIn(500);
                    $( "#sliderbox" ).slideUp( "slow" );
                    $( ".arrow" ).fadeOut(100);
                    $( ".balken" ).fadeOut(100);                
                    var y = $(window).scrollTop();  //your current y position on the page
                    $('html, body').animate({
                        scrollTop: y+150
                    },500);
                } else {
                    $( "#sliderbox" + sliderNUmber ).slideUp( "slow" );
                    $( ".arrow" + sliderNUmber ).fadeOut(100);
                    $( ".balken" + sliderNUmber ).fadeOut(100);
                }
});

现在您的滑块功能更通用，您可以根据需要多次重复使用它，只需确保将数据滑块编号添加到每个链接并确保滑动元素具有正确的ID

希望这有帮助。

一页上有多个jQuery滑块，无需重复代码

1 个答案: