javascript - 对按钮施加限制

Question

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

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

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

我已经尝试过了，为什么不起作用？

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

Answer 1

因为 hasClass 不接受多个参数，并且由于 .click 要么触发点击，要么绑定(bind)点击监听器，所以它不会设置可点击性。

根据 .minibutton 是什么，您可以执行以下操作:

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

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

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

并像这样绑定(bind)点击监听器:

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

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