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的实例，以便我可以识别该实例的新属性？例如，answers = false并分配输入文本值。

Answer 1

我不知道“制作this的实例”是什么意思。在javascript中，this是一个引用某个对象的特殊变量，它引用的对象取决于当前函数的调用方式。

在jQuery事件处理程序中，this变量引用触发事件的元素（在本例中，是单击的元素：clickbox1）。

如果你想拥有一个单独的事件处理程序而不是10个不同的处理程序（这确实是一个好主意！），你的事件处理程序应该使用this变量来确定要操作的内容。

首先，我们希望为clickbox的所有实例提供单个事件处理程序。有两种不同的方法可以做到这一点：我们可以将处理程序添加到所有div.clickbox元素中，或者我们可以将委托事件处理程序添加到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;
  }); 
});

Answer 2

您应该将一个处理程序附加到所有类似的元素，然后在处理程序中使用this引用。

将单个处理程序附加到具有“clickbox”类的所有元素，该类打开具有“riddlebox”类的下一个元素。像这样：

$('.clickbox').click(function () {
    $(this).next('.riddlebox').show();
});

然后将处理程序附加到表单提交事件。我不认为您需要等到表单显示才能执行此操作。也就是说，它不必位于上面的点击处理程序中。

$('form').submit(function () {
    var $form = $this;
    var answer = $form.find('input').val().toLowerCase();
    f (answer == //do some checks && $form.data('answered')){ 
        $form.data('answered', true);
        points++;
        $form.find('input').val('');
    }
    return false;
});

请注意.data()方法如何用于跟踪表单的问题是否已得到解答。

jsfiddle demo

使用此方法压缩多次单击并提交功能

2 个答案: