0

次のコードを実行すると、#overlay、#image + theNumber、および #close だけをアクティブにしたいので、$('.box').click を無効にしていますが、#close をクリックしたら再度有効にします$('.box') をクリックしますが、これまでのところできません。他の回答をチェックアウトしましたが、まとめることができませんでした。助けてくれてありがとう！！


var ハンドラ = 関数() {

var theIDval = $(this).attr('id');
var theNumber = theIDval.replace('box','');

    $('.box').unbind('click');

    $('#overlay').show();
    $('#image' + theNumber).fadeIn();
    $('#close').fadeIn();

    $('#close').click( 関数 () {
        $('#overlay').fadeOut();
        $('#image' + theNumber).fadeOut();
        $('#close').fadeOut();

        });
    };

$(document).ready( function() {
    $('.box').click(ハンドラ);
});
4

2 に答える 2

2

あなたが見逃しているのは、クリックハンドラ関数.boxでクリックイベントを再バインドしているようです#close

$('#close').click(function() {
    $('#overlay').fadeOut();
    $('#image' + theNumber).fadeOut();
    $('#close').fadeOut();
    $('.box').click(handler);
});

http://jsfiddle.net/pxfunc/gUP68/

于 2011-06-22T17:28:55.327 に答える
1

私があなたなら、次のようにします。

var handler = function() {
    var $box = $('.box');
    if($box.hasClass('disabled')){
       // do nothing, just disallow further spawns
   } else{
        $box.addClass('disabled');
        var theIDval = $(this).attr('id');
        var theNumber = theIDval.replace('box','');

        // no need to unbind, remove this
        // $('.box').unbind('click');

        $('#overlay').show();
        $('#image' + theNumber).fadeIn();
        $('#close').fadeIn();

        $('#close').click( function () {
            $('#overlay').fadeOut();
            $('#image' + theNumber).fadeOut();
            $('#close').fadeOut();
            $box.removeClass('disabled'); // re-enable click
        });
   }
};

$(document).ready( function() {
    $('.box').click(handler);
});
于 2011-06-22T17:26:52.873 に答える