javascript - 使用 Handlebars 、jquery 单击复选框时从表中获取列值

Question

我最近开始研究 JS、jQuery 和 Handlebars.js。我将从 java 获取的数据显示到 divTable 上。 Handlebars 模板如下所示

<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 助手如下:

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 中事件的绑定(bind)随后在 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 将始终反射(reflect)表的当前选中/未选中状态。

我创建了一个fiddle供引用。