javascript - 对按钮施加限制

Question

在我的程序中，突出显示了一个名为“validDrop”的区域，供用户将项目拖放到其中。

单击按钮“minibutton”时，新区域会突出显示。

我想告诉程序仅在当前区域（validDrop）的样式为“wordglow2”和“wordglow4”时才允许单击按钮。

这个我试过了，为什么不行？

if ($(validDrop).hasClass('wordglow2', 'wordglow4')) {
    $('.minibutton').click(true);
} else {
    $('.minibutton').click(false);
}

score 3 · Accepted Answer

因为hasClass不带多个参数，并且因为.click要么触发点击要么绑定点击监听器，所以它不设置可点击性。

根据具体.minibutton情况，您可以执行以下操作：

var valid = $(validDrop).hasClass('wordglow2') && $(validDrop).hasClass('wordglow4')
$('.minibutton').prop('disabled', !valid);

如果它不是可以禁用的类型，您可能会考虑这样的事情：

$('.minibutton').toggleClass('disabled', !valid);

并像这样绑定点击监听器：

$(document).on('click', '.minibutton:not(.disabled)', function() {
    // click action here
});

正如 ThiefMaster 在评论中指出的那样，$(validDrop).is('.wordglow2.wordglow4')这是一种功能等效的检查 drop 是否具有两个类的方法。

score 1 · Accepted Answer

您还可以使用.bind()and.unbind()向按钮添加和删除单击事件，如我的示例http://jsfiddle.net/Uz6Ej/

2 回答 2