javascript - 选中复选框将类添加到 child

Question

我正在尝试向 <a href> 添加一个新类“ok”当它被检查时。我正在使用 http://wenzhixin.net.cn/p/bootstrap-table 中的 Bootstrap 、jquery 和 Bootstrap 表.

jsfiddle:http://jsfiddle.net/x0wegnhs/1/

你能帮我释放那个吗？

<tr>
    <td class="bs-checkbox"><input data-index="0" name="btSelectItem" type="checkbox"></td>
    <td style="text-align: left; "><a href="#" class="file">file 1</a></td>
</tr>

Answer 1

使用closest 找到最近的tr，然后使用find 找到 anchor 链接。使用带有 bool 值的 toggleClass 来根据检查状态打开/关闭 ok 类。

http://jsfiddle.net/TrueBlueAussie/x0wegnhs/6/

$(':checkbox').change(function () {
    $(this).closest('tr').find('td a').toggleClass('ok', $(this).is(':checked'));
});

---

关于 jQuery 与直接访问的附注:

正如 @Karl-André Gagnon 指出的那样，显然可以通过将 RAW JS 用于选中的属性来缩短一点，如下所示:

$(':checkbox').change(function () {
    $(this).closest('tr').find('td a').toggleClass('ok', this.checked));
});

但是，我通常会为 $(this) 元素和我的选择器常量设置一个变量，因此:

$this.is(checkedSelector)

缩小后变成下面的样子:

t.is(c)

实际上比:

this.checked

因为 this 和 checked 属性无法缩小 :)