當使用把手單擊複選框時從列表中獲取列值，jquery

Question

我最近開始使用JS，jQuery和Handlebars.js。我正在顯示我從java獲得的數據到divTable。車把模板如下所示

<div id = "diffs"> 
"Others" 
    <div class="divTable" id="diffTable"> 
    <div class="divTableBody"> 
    <div class="divTableRow"> 
    <div class="divTableCell">header;</div> 
    <div class="divTableCell">header;</div> 
    <div class="divTableCell">header;</div> 
    <div class="divTableCell">header;</div> 
    </div> 
    {{#each diffs}} 
    {{#diff this.[1]}} 
    <div class="divTableRow" id="diffTableRow"> 
    <div class="divTableCell column1">{{this.[0]}}</div> 
    <div class="divTableCell">{{this.[1]}}</div> 
    <div class="divTableCell">{{this.[2]}}</div> 
    <div class="divTableCell"><input class="divCheckbox approveCheckbox" type="checkbox" /></div> 
    </div> 
    {{/diff }} 
    {{/each}} 
    </div> 
    </div>  
    <button class="differences-modal-dismiss"> Cancel </button> 
    </div> 

車把幫手如下：

Handlebars.registerHelper('diff', function(var1, options) 
{ 
    if (var1 !== "someValue") 
    { 
     return options.fn(this); 
    } 
    return options.inverse(this); 
}); 

我需要的是，當一個複選框成爲選中，獲得.column1元素中選中的複選框的文本行。我在我的JS如下：

$('.approveCheckbox').click(
    function() 
    {  
     meanings.push($('.column1').text());   
    }); 

這只是從第一行返回值，無論是查了一下複選框。我嘗試使用.each()方法，但我不確定我是否正確地使用它。這是我與.each()做：

$('.column1').each(function(){     
      if($("input:checked")) 
      { 
       alert($(this).text());      
      } 
     }); 

我可以當其對應的複選框被選中，從.column1返回的值，用一些幫助。我應該改變我的幫手還是無論如何，我可以從jQuery做到這一點？

謝謝。

Answer 1

您的問題與Handlebars沒有任何關係。 Handlebars用於創建返回可添加到DOM的HTML字符串的模板方法。綁定到DOM中的事件是在JavaScript中完成的，並且可以像jQuery這樣的庫來幫助您。

這樣說，你的點擊事件處理程序的問題在於它沒有提供一個範圍，在該範圍內找到.column1元素，因此它找到頁面上的第一個並獲取其文本。我們必須做的是獲取單擊複選框的父級.divTableCell，然後在父級的.divTableCell兄弟中找到類「column1」的元素。 jQuery有這樣做的一些有用的方法：

$('.approveCheckbox').click(function() { 
    meanings.push($(this).parent().siblings('.column1').text()); 
}); 

上面的代碼將獲得正確的文本，但它會不會滿足你獲得對應於每個選中的複選框文本的要求。每次選中或取消選中該複選框時，此代碼都會將文本值推送至meanings。您可能會發現下面是一個更合適的解決方案：

$('.approveCheckbox').change(function() { 
    meanings = $('.approveCheckbox') 
     .filter(':checked') 
     .map(function (index, el) { 
      return $(el).parent().siblings('.column1').text(); 
     }) 
     .get(); 
}); 

上面的代碼做什麼，在每一個變化到.approveCheckbox，是讓所有.approveCheckbox元素，篩選出未檢查，映射其餘的框轉換爲相應的文本值，將結果轉換爲簡單數組，然後將該數組分配給變量meanings。這樣，meanings將始終反映表格的當前選中/未選中狀態。

我已經創建了fiddle作爲參考。