jQuery（this）：如何切换下一个表？

Question

当用户点击链接时，我想显示/隐藏以下结构的表格：

<div class="container">
    <div class="banner">
        <h2>$header</h2>
    </div>
    <p class="howto">balbalblablablalbalbalbalblabla <a href='#'>link</a></p>
        <table id=table_action class="widefat">
        ...
        </table>
</div>

我试过这个，但它不起作用，我不明白为什么：

jQuery(document).ready(function(){  
    jQuery('.howto a').click(function() {
        jQuery.(this).next('table').toggle();
    });
});

对我来说： jQuery。（this）指的是触发事件的dom元素，并且有一个表元素，我的代码片段出了什么问题？

谢谢， 本

Answer 1

您的链接$('.howto a')位于.howto内。在链接上调用.next()会返回虚无。

相反，请在.click()：

中进行尝试

jQuery(this).parent().next('table').toggle();

修改

此外，您可能需要添加.preventDefault()以防止在点击链接时发生默认行为：

jQuery('.howto a').click(function(event) {
    event.preventDefault();
    jQuery(this).parent().next('table').toggle();
});

Answer 2

Working fiddle

代码：

 jQuery(this).parent().next('table').toggle();

您的代码中有两个问题：

1. jQuery.(this)代替jQuery(this)
2. 在锚元素上调用.next('table')，但该表位于父段元素旁边。在.parent()解决此问题之前致电.next。