javascript - 使用此压缩多次点击和提交功能

Question

我在单个页面上创建了一个游戏，我有 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 并分配输入文本值。

Answer 1

我不知道你所说的“创建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;
  }); 
});