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.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字符串的模板方法。之后在JavaScript中对DOM中的事件进行绑定，并且正如您所做的那样，可以使用jQuery之类的库来辅助。

说到这一点，你的点击事件处理程序的问题在于它没有提供查找.column1元素的范围，所以它在页面上找到第一个并获取其文本。我们必须做的是获取点击的复选框的父级.divTableCell，然后在父级的.divTableCell兄弟姐妹中找到带有类＆＃34; column1＆＃34;的元素。。 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作为参考。

使用把手jquery单击复选框时从表中获取列值

1 个答案: