ハンドルバーを使用してチェックボックスをクリックしたときにテーブルからカラム値を取得するjquery

Question

最近JS、jQuery、Handlebars.jsの作業を開始しました。私はdivTableにJavaから取得しているデータを表示しています。ハンドルバーのテンプレートが

<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要素のテキストを取得するには、チェックボックスがチェックになったとき、ある必要なもの行。

$('.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への各変化に、あるん残りのボックスをマップすると、すべての.approveCheckboxの要素を取得未確認のものをフィルタリングするためには何

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

：あなたはより適切な解決策になると、次のかもしれません対応するテキスト値に変換し、結果を単純な配列に変換し、この配列を変数meaningsに代入します。このようにして、meaningsは常にテーブルの現在のチェック済み/未チェック状態を反映します。

参考としてfiddleを作成しました。