Question

编辑**

在我的游戏中，我希望我的按钮在一次点击后禁用但由于某种原因，我所看到的所有方式都不起作用。

这就是我现在所拥有的......

$('.minibutton').click(function() {

$(this).attr('disabled','disabled');
$('.minibutton').prop('disabled', false);
$('.picstyle').show();
$('td').removeClass('spellword');
var r = rndWord;
while (r == rndWord) {
    rndWord = Math.floor(Math.random() * (listOfWords.length));
}

$('td[data-word="' + listOfWords[rndWord].name + '"]').addClass('spellword');
$('td[data-word=' + word + ']').removeClass('wordglow').removeClass('wordglow4').removeClass('wordglow3').css('color', 'transparent');

var noExist = $('td[data-word=' + listOfWords[rndWord].name + ']').hasClass('wordglow2');
if (noExist) {
    $('.minibutton').click();

} else {

    $("#mysoundclip").attr('src', listOfWords[rndWord].audio);
    audio.play();
    $("#mypic").attr('src', listOfWords[rndWord].pic);
    jQuery(pic).show();
}


}).trigger("click");

我尝试将点击功能更改为..

$('.minibutton').one("click", function() {

我也尝试绑定和取消绑定它但不起作用

小提琴http://jsfiddle.net/7Y7A5/9/

拼写突出显示的单词，使用图片作为线索。如果你错了3次这个词，你就有机会继续前进，因为出现了“minibutton”。此时我只希望用户能够再次点击它再次消失。

Answer 1

查看jQuery .on()和.off()方法。在jQuery网站的文档中，应该有一个关于命名空间的部分 - 这部分涵盖了你正在寻找的内容。

下面，我已经为您提供了您正在寻找的解决方案，但无论如何都请查看文档，以便您更好地理解它。

首先，在您的点击处理程序上方添加此变量声明：

var timesClicked = 0;

然后，将您的处理程序声明更改为：

$('.minibutton').on("click.oneclick", function () {...});

在处理程序中添加以下行：

if (timesClicked > 0) {
    $(this).off("click.oneclick");
} else {
    timesClicked++;
}

基本上，这里发生的是你给你的点击事件处理程序一个独特的名称，使其与页面上的所有其他点击事件处理程序区别开来（也就是说，所有其他点击事件处理程序也没有该命名空间）。您可以应用命名空间“foo” - 我选择应用命名空间“oneclick”。结果是您可以删除该特定的单击事件处理程序，而无需删除任何其他单击事件处理程序（即任何其他没有给定命名空间的处理程序）。

试试这个问题的updated fiddle。

<强>更新

为了帮助您解决重新启用点击事件的问题，请先执行以下操作（注意：您的代码中有很多内容需要清理，但我确实指出了一件事，这是空的点击处理程序设置为minibutton）：

var clickOnceTest = 0;
function enableMinibutton() {
    $('.minibutton').on("click.clickOnceNS", function() {
        if (clickOnceTest > 0) {
            $(this).off("click.clickOnceNS");
        } else {
            clickOnceTest++;
        }
        $('.minibutton').prop('disabled', false);
        $('.picstyle').show();
        $('td').removeClass('spellword');
        var r = rndWord;
        while (r == rndWord) {
            rndWord = Math.floor(Math.random() * (listOfWords.length));
        }

        $('td[data-word="' + listOfWords[rndWord].name + '"]').addClass('spellword');
        $('td[data-word=' + word + ']').removeClass('wordglow').removeClass('wordglow4').removeClass('wordglow3').css('color', 'transparent');

        var noExist = $('td[data-word=' + listOfWords[rndWord].name + ']').hasClass('wordglow2');
        if (noExist) {
            /////
            /////
            /////
            /////
            /////        
            ////// Is this supposed to trigger a click? because all this does is set another click handler (which does nothing) to minibutton..
            /////
            /////
            /////
            /////
            /////
            $('.minibutton').click();

        } else {

            $("#mysoundclip").attr('src', listOfWords[rndWord].audio);
            audio.play();
            $("#mypic").attr('src', listOfWords[rndWord].pic);
            pic.show();
        }

    });
}

enableMinibutton();
$(".minibutton").trigger("click");

完成上述操作后，当您准备重新启用minibutton时，您只需调用enableMinibutton()方法即可。如果您需要再次调用trigger("click")方法，请执行此操作（我不确定为什么它首先出现在那里）。您可以在第二次显示按钮之前/之后立即调用此方法（我的偏好 - 我不喜欢不必要的处理程序减慢我的脚本速度），或者您可以在隐藏按钮后立即调用它。

至于其他需要清理的东西：在整个代码中你都有东西，比如我指出的空单击处理程序，这是不必要的，减慢你的程序，抛出错误，或者只是简单地不起作用。尽快删除或评论这些内容。一旦这样做，您的代码将运行得更顺畅，您的测试/实验将更有可能成功/失败，而不会受到错误代码的影响。

此外，我不能强调这一点，你需要将元素选择器设置为变量。您在整个代码中选择了minibutton和minibutton2以及其他一些项目数十次。只需将它们的选择器设置为顶部的变量，并使用所述变量来引用您的元素，而不是一遍又一遍地选择它们。每次调用jQuery选择器时，基本上都是在DOM中搜索满足选择器的元素。如果您的集合中始终包含相同的元素，请将选择器设置为变量并调用变量。这样，您只搜索DOM一次这些元素。在重量级程序中，性能差异非常明显，特别是在这样的程序中。如果您不熟悉此语法，请使用minibutton和minibutton2两个示例：

var $minibutton = $(".minibutton");
var $minibutton2 = $(".minibutton2");
....
$minibutton.on("click.click.......
...
$minibutton.trigger(....
...
$minibutton2.prop(...
...

正如您所看到的，我喜欢使用$为我的选择器变量添加前缀，以便更容易看到并记住它们保存的变量是一个选定的元素。这不是必需的，您可以将变量名称设置为您想要的任何名称。

执行此操作的唯一方法是，如果您计划将更多项添加到选择器将返回的DOM，则必须“更新”该变量;变量将引用选择器返回的所有元素，而选择器最初被调用。这意味着如果你有一个特定类的元素集合并设置一个变量来引用该集合，那么在添加所述类的其他元素之前，为了引用稍后由该选择器返回的其他元素，你将不得不再设一次。是的，我知道这很长很令人困惑，但它实际上非常简单，网上有很多关于它的例子。

Answer 2

<input type="submit" onclick="this.disabled = true" value="Save"/>

Answer 3

使用现代Js，＆＃34;禁用＆＃34;或者＆＃34;一次＆＃34;！

button.disabled = true;

或

button.addEventListener("click", function() {
    // Fire event
}, {once : true});

Documentation，CanIUse

单击按钮一次

3 个答案:

使用现代Js，＆＃34;禁用＆＃34;或者＆＃34;一次＆＃34;！