无法弄清楚为什么我的更改(...)事件处理程序在这种情况下不起作用

Question

相关的HTML片段如下

<tbody id="results">
    <tr>
        <td>
            <input type="checkbox">
            <a href="c:usersmedocumentsvisual studio 2013ProjectsmyprojAssets/someorg-somecategory-somepic.png" class="hidden">c:usersmedocumentsvisual studio 2013ProjectsmyprojAssets/someorg-somecategory-somepic.png</a>
        </td>
        <td>someorg</td>
        <td>somecategory</td>
        <td>somepic.png</td>
    </tr>
</tbody>

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

看起来应该足够简单:

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

inside a $(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/

Answer 2

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

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

例子小提琴