javascript - 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 元素，并且有一个 table 元素，我的代码片段有什么问题？

谢谢，本

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

工作小提琴

代码：

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

您的代码中有两个问题：

1. jQuery.(this)代替jQuery(this)
2. 调用.next('table')锚元素，但表格位于父段落元素旁边。.parent()之前调用.next解决了这个问题。