1

我在单个页面上创建了一个游戏，并且我有 10 个点击功能，这些功能在包含表单的多个 div 上触发。div 里面是玩家必须填写的问题。我已经能够使用这行代码来定位每个单独的表单：var answer1 = $('form[name="form1"] >input:text').val()这样每个表单都会改变.. [name="form2"]..等等。我之前在这里的另一篇文章中问过。所以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 个这样的功能。我试图将所有这些浓缩成一个函数。我是否需要在this每次单击 div 时创建一个实例，以便我可以识别该实例的新属性？例如，answered = false 并分配输入文本值。

4

2 回答 2

1

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

在 jQuery 事件处理程序中，this变量指的是触发事件的元素（在这种情况下，是被点击的元素：）clickbox1。

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

所以首先，我们希望为所有clickbox. 有两种不同的方法可以做到这一点：我们可以将处理程序添加到所有div.clickbox元素，或者我们可以将委托事件处理程序添加到 DOM 更高层的元素。这就是我所说的第二个意思：

$(document).on('click', '.clickbox', function() {});

to 的第二个参数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;
  }); 
});
于 2013-04-13T16:45:39.463 回答
1

您应该将单个处理程序附加到所有类似元素，然后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 演示

于 2013-04-13T16:46:36.833 回答