1

シンプルなコンテンツ スライダーがあります。誰かが赤い四角を何度もクリックすると、スライドが積み重なっていきます。
setTimeout を使用して、動作中に多くのクリックを防止しましたが、再びスタックしました。アンバインド/バインドも機能しませんでした。この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);
});
4

1 に答える 1

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 (未使用のマークアップを削除しました)。

于 2012-07-21T07:30:12.580 に答える