对按钮施加限制

Question

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

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

我想告诉程序只允许点击按钮，如果当前区域（validDrop）由'wordglow2'和'wordglow4'设置样式。

我试过这个，为什么它不起作用？

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

Answer 1

由于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同时具有两个类的方法。

Answer 2

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