Question

我有一个简单的内容滑块。当有人点击红色方块这么多次时，幻灯片会堆叠起来我使用setTimeout来阻止工作时的多次点击，但它再次堆积起来。 unbind / bind也不起作用。在this jsFiddle Code我放了一个样本。当有人点击红色方块时，我该怎么做以防止显示下一张幻灯片？

这是我用unbind无法运行的代码：

$(function(){
    $(".circle").click(function(e){
        $(".circle").unbind('click');
        var ref = $(this);
        var id= parseInt(ref.attr('id'));
        $(".circle").attr('src','inactive-circle.gif');
        ref.attr('src','active-circle.gif');
        $(".boxicon").fadeOut(50,function(){
            $("#slide"+id).fadeIn(450);
            $(".circle").bind('click');
        });



    });
})

最终结果略有变化：

$(".circle").click(function() {
    var id = parseInt($(this).attr('id'), 10);
    $(".circle").attr('src', 'inactive-circle.gif');
    $(this).attr('src', 'active-circle.gif');
        $(".boxicon").hide();
    $("#slide" + id).stop(true, false).fadeIn(250);
});

Answer 1

我可以看到一些错误，

当您执行var ref = $(this)时，您无需执行$(ref)，

所以你是行，

$(ref).attr('id') 

$(ref).attr('src','active-circle.gif');

将是，

ref.attr('id') 

ref.attr('src','active-circle.gif');

这可能会导致一些问题，

您想要实现的目标是什么？

只是看看你的小提琴中的标记，你的jQuery看起来有点搞砸了内容滑块。

<强>更新

$(function() {
    $(".circle").click(function() {
        var id = parseInt($(this).attr('id'), 10);

        /*the .each() here is optional, you can always do this,
        $(".circle").attr('src', 'inactive-circle.gif');
        */
        $(".circle").each(function() {
            $(this).attr('src', 'inactive-circle.gif');
        });


        $(this).attr('src', 'active-circle.gif');

        /*the .each() here is optional, you can always do this,
        $(".boxicon").fadeOut(50);
        */    
        $(".boxicon").each(function() {
            $(this).fadeOut(50);
        });

        $("#slide" + id).stop(true, true).fadeIn(450);

    });
});

做出适当的更改（根据您的加价），如果您有任何疑问，请随时提出。

Fiddle Link（已删除未使用的标记）。

当我点击红色方块淡出时，为什么fadeOut / fadeIn叠加？

1 个答案: