Question

HTML的相关部分就像

<tbody id="results">
    <tr>
        <td>
            <input type="checkbox">
            <a href="c:\users\me\documents\visual studio 2013\Projects\myproj\Assets/someorg-somecategory-somepic.png" class="hidden">c:\users\me\documents\visual studio 2013\Projects\myproj\Assets/someorg-somecategory-somepic.png</a>
        </td>
        <td>someorg</td>
        <td>somecategory</td>
        <td>somepic.png</td>
    </tr>
</tbody>

我的意图是a元素旁边的input元素可见或隐藏，具体取决于是否检查了input。

似乎应该很简单：

$('#results input').change(function() {
    console.log("ok, this function got called.");
    this.siblings('a').toggleClass('hidden');
});

在$(function() { ... });

内

但是，这不起作用。通过选中或取消选中元素进行测试时，没有任何内容打印到控制台。知道为什么会这样吗？需要我发布更多代码吗？

Answer 1

在复选框或id

中添加class

<input type="checkbox" id="checkbox"/>

使用$(this)而不是this

$(this).siblings('a').toggleClass('hidden');

工作演示：http://jsfiddle.net/omnzocqq/

<强>更新

根据我的想法，你忘了把table换行放到tbody。但是，如果您添加table包装器元素并将this修改为$(this)，则代码可以正常运行。

因此，您无需向class添加id或checkbox。

http://jsfiddle.net/omnzocqq/3/

Demo

Answer 2

问题是因为处理程序this内是一个DOMElement。您需要将this包装在jQuery对象中，以便能够在其上调用jQuery方法：

$('#results input').change(function() {
    $(this).siblings('a').toggleClass('hidden');
});

Example fiddle

无法弄清楚为什么我的change（...）事件处理程序在这种情况下不起作用

2 个答案: