Question

我有一个旋转木马滑块，角落里有三个静态“点”，每个幻灯片一个。当幻灯片处于活动状态时，相应的点为白色。不活动时，点为灰色。我已经使用下面的代码实现了这一点，但我是Jquery的新手，所以我在寻找是否可以缩短它。

是否可以将此代码重写为更短？

我在HTML中有这个：

<a id="th_1" class="thumb act"></a>
<a id="th_2" class="thumb"></a>
<a id="th_3" class="thumb"> </a>

然后我在文档顶部的jquery中有这个：

$(document).ready(function(){   

            $('#th_1').click(function(){
                $('#carousel').carousel(0); //go to slide1
                $('#th_1').addClass('act');
                $('#th_2').removeClass('act');
                $('#th_3').removeClass('act');
            ;})     

            $('#th_2').click(function(){
                $('#carousel').carousel(1); //go to slide 2
                $('#th_1').removeClass('act');
                $('#th_2').addClass('act');
                $('#th_3').removeClass('act');
            ;}) 

            $('#th_3').click(function(){
                $('#carousel').carousel(2); //go to slide 3
                $('#th_1').removeClass('act');
                $('#th_2').removeClass('act');
                $('#th_3').addClass('act');
            ;})

然后，我也有以下代码，用于幻灯片自动旋转，没有点击（因为我也需要在发生这种情况时更改点）。

$('#carousel_slide_1').hasClass('active')(function(){
                $('#th_1').addClass('act');
                $('#th_2').removeClass('act');
                $('#th_3').removeClass('act');
            });

$('#carousel_slide_2').hasClass('active')(function(){
                $('#th_1').removeClass('act');
                $('#th_2').addClass('act');
                $('#th_3').removeClass('act');
            });

$('#carousel_slide_3').hasClass('active')(function(){
                $('#th_1').removeClass('act');
                $('#th_2').removeClass('act');
                $('#th_3').addClass('act');
            });

“活动”类位于包含幻灯片的div上。当幻灯片处于活动状态时，此类将通过另一个轮播脚本添加到div中。所以上面我检查div是否有这个类，如果是，我改变了“dot”的类。

类“行为”只是“点”的背景变化，如果设置了类，则使其变为白色。如果删除，点的颜色为灰色。

希望我没有忘记任何事情。如果是这样，我会更新这个问题。感谢

Answer 1

$(".thumb").click(function() {
    $('#carousel').carousel($(this).index());
    $(this).addClass("act").siblings().removeClass("act");
});

你只需要绑定到.thumb类，这将为所有匹配附加一个点击处理程序。
您可以获得所点击的.index，并使用它来调用您的轮播。
点击的人获得课程，其他人（兄弟姐妹）获得课程。

您可以使用该模式缩短实施的其余部分。

Answer 2

对于第一段代码，您可以使用index()函数和像thumb这样的通用类。

$('.thumb').click(function(){
    $('#carousel').carousel($(this).index());
    $('.thumb').removeClass('act');
    $(this).addClass('act');
});

第二段代码似乎不适合你要做的事情。我们的想法是创建一个函数或对象来处理这些事件，您可以传递值，而您只需在jQuery事件中调用这些函数。我希望这是有道理的我刚才写了一篇关于如何在jQuery中创建滑块的教程，它可能很有用。 http://www.onextrapixel.com/2011/07/01/how-to-create-a-slideshow-plugin-with-jquery/

Answer 3

除了其他答案，

$(document).ready(function(){

相当于

$(function(){

请参阅http://api.jquery.com/ready/

优化用于切换的jquery代码

3 个答案: