使用jQuery啟用和禁用點擊

Question

我有四個具有clickable屬性的按鈕。 單擊按鈕將使div向下滑動，然后再次單擊同一div將關閉div。 我想添加一個條件，例如，當我打開div時，應禁用其余三個按鈕上的click屬性，我所做的是

for (var i = 1; i <= 4; i++) {
    $(".slide" + i).click(function () {
        var openTab = $(this).attr('class');
        openTab = openTab.replace('slide', '');
        var facetGroup = $(this).attr("key");
        if ($('#panel').is(':visible')) {
            buttonCloser(openTab);
        } else {
            buttonOpener(openTab, facetGroup);
        }
    });
}

function buttonCloser(m) {
    for (var j = 1; j <= 4; j++) {
        if (j != m) {
            //alert(j);
            $(".slide" + j).bind("click");
        } else {
            $(".slide" + j).css({
                "background-color": " #fff5c3",
                "color": "#000000"
            });
        }
    }
    $("#panel").slideUp("slow");
}

function buttonOpener(m, n) {
    for (j = 1; j <= 4; j++) {
        if (j != m) {
            $(".slide" + j).unbind("click");
        } else {
            $(".slide" + j).css({
                "background-color": "#293345",
                "color": "#fff5c3"
            });
        }
    }
    $("#panel").slideDown("slow");
    refreshFacet(n);
}

這段代碼的問題是，我第一次通過單擊滑塊打開div時，其他三個click事件被禁用，bt當我關閉該div時，它將不會重新啟用其click屬性。 所以它不會打開任何東西..

Answer 1

在沒有看到實際的標記的情況下，我建議您使用簡單的jQuery，而不是在“普通” JavaScript和jQuery之間進行混合和匹配：

var buttons = $('button[class^="slide"]'),
    panel = $('#panel');

$(buttons).click(
    function() {
        var that = $(this);
        if (panel.is(':visible')) {
            if (that.hasClass('opener')) {
                panel.slideToggle();
                that.removeClass('opener');
            }
            else {
                return false;
            }
        }
        else {
            panel.slideToggle();
            that.addClass('opener');
        }
    });​

JS小提琴演示 。

---

參考文獻：

• addClass() 。
• 屬性以選擇器attribute^="value"選擇器開頭 。
• hasClass() 。
• removeClass() 。
• slideToggle() 。