看看 jQuery.on()
和.off()
方法。在 jQuery 网站上的文档中,应该有一个关于命名空间的部分——这部分涵盖了您正在寻找的内容。
下面,我已经为您提供了您正在寻找的解决方案,但无论如何都要查看文档,以便您更好地理解它。
首先,在您的点击处理程序上方添加此变量声明:
var timesClicked = 0;
然后,将您的处理程序声明更改为:
$('.minibutton').on("click.oneclick", function () {...});
并在您的处理程序中添加这些行:
if (timesClicked > 0) {
$(this).off("click.oneclick");
} else {
timesClicked++;
}
基本上,这里发生的事情是您为单击事件处理程序提供了一个独特的名称,以将其与页面上的所有其他单击事件处理程序(即所有其他没有该名称空间的单击处理程序)区分开来。您可以应用命名空间“foo”——我选择应用命名空间“oneclick”。结果是您能够删除特定的单击事件处理程序,而无需删除任何其他单击事件处理程序(即,任何其他没有给定名称空间的处理程序)。
试试这个更新的解决方案。
更新:
为了帮助您解决重新启用单击事件的问题,首先执行以下操作(注意:您的代码中有很多东西需要清理,但我确实指出了一件事,这是一个空的单击处理程序设置为小按钮):
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
and minibutton2
:
var $minibutton = $(".minibutton");
var $minibutton2 = $(".minibutton2");
....
$minibutton.on("click.click.......
...
$minibutton.trigger(....
...
$minibutton2.prop(...
...
如您所见,我喜欢在选择器变量前面加上前缀,$
以便更容易看到并记住它们所保存的变量是选定元素。这不是必需的,您可以将变量名称设置为您想要的任何名称。
这样做的唯一问题是,如果您计划向选择器返回的 DOM 添加更多项目,则必须“更新”变量;该变量将引用选择器在最初调用选择器时返回的所有元素。这意味着,如果您有一个特定类的元素集合并设置一个变量来引用该集合,那么在向该类添加其他元素之前,为了引用稍后将由该选择器返回的其他元素,您将不得不重新设置。是的,我知道这很长而且令人困惑,但它实际上很简单,网上有很多关于它的例子。