我在单个页面上创建了一个游戏,我有 10 个点击函数,这些函数在包含表单的多个 div 上触发。 div 内部是玩家必须填写的问题。我已经能够使用这行代码定位每个单独的表单:var answer1 = $('form[name="form1"] >input:text' ).val()
这样每个表单都会改变 .. [name="form2"]..
等等。我之前在另一篇文章中问过here .所以html如下:
<div class = "clickbox clickbox1"></div>
<div class = "riddlebox riddlebox1">
//question
<form name="form1">
<input type="text" value=""/>
</form>
</div>
<div class = "clickbox clickbox2"></div>
<div class = "riddlebox riddlebox2">
//question
<form name="form2">
<input type="text" value=""/>
</form>
</div>
和处理它的 Jquery :
$( ".clickbox1" ).click(function() {
var answered = false;
$( ".riddlebox1" ).show();
$('form[name="form1"]').submit(function () {
var answer1 = $('form[name="form1"] >input:text').val().toLowerCase();
if (answer1 == //do some checks &&(!answered) ){
answered=true;
points++;
$('form[name="form1"] >input:text').val("");
}
return false;
});
});
我有 10 个这样的功能。我试图将所有这些压缩成一个函数。我是否需要在每次单击 div 时创建一个 this
的实例,以便我可以识别该实例的新属性?例如 answered = false 并分配输入文本值。
最佳答案
我不知道你所说的“创建this
的实例”是什么意思。在javascript中,this
是一个引用某个对象的特殊变量,它引用的对象取决于当前函数的调用方式。
在 jQuery 事件处理程序中,this
变量引用触发事件的元素(在本例中,被单击的元素:clickbox1
)。
如果您想要一个事件处理程序而不是 10 个不同的事件处理程序(这确实是个好主意!),您的事件处理程序应该使用 this
变量来确定要操作的内容。
因此,首先,我们希望为 clickbox
的所有实例提供一个事件处理程序。有两种不同的方法可以做到这一点:我们可以将处理程序添加到所有 div.clickbox
元素,或者我们可以将委托(delegate)事件处理程序添加到 DOM 更高层的元素。这是我所说的第二个意思:
$(document).on('click', '.clickbox', function() {});
on
的第二个参数是一个过滤器,它指示应该处理哪些传播的事件。
现在我们想让您的处理程序函数通用化,因为它使用 this
来查找相关元素,而不是使用像 .riddlebox1
这样的硬编码索引:
$(document).on('click', '.clickbox', function() {
// inside this function, "this" refers to the clicked div
var answered = false;
// find the riddlebox which comes after the clicked clickbox
var $riddlebox = $(this).next(".riddlebox").show();
$riddlebox.children("form").submit(function () {
// inside this function, "this" refers to the form
var $textbox = $(this).find('>input:text');
var answer1 = $textbox.val().toLowerCase();
if (answer1 /* do some checks*/ ){
answered=true;
points++;
$textbox.val("");
}
return false;
});
});
关于javascript - 使用此压缩多次点击和提交功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15990054/