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

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>

我的意图是让 input 元素旁边的 a 元素可见或隐藏，具体取决于 input 是否被选中。

看起来应该很简单：

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

里面一个$(function() { ... });

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

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)，您的代码就可以工作。

因此您不需要在 checkbox 中添加 class 或 id。

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(...) 事件处理程序在这种情况下不起作用

Can't figure out why my change(...) event handler isn't working in this scenario

javascript

algorithm

jquery

event-handling