凝聚多個點擊並使用此功能提交

Question

我在單個頁面上創建了一個遊戲，並且我有10個點擊函數在多個包含表單的div上觸發。在divs裏面是玩家必須填寫的問題。我已經能夠用這行代碼來針對每一個單獨的表格：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的實例，以便我可以識別該實例的新屬性？例如回答= 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