jquery - .on 与切换 jQuery

Question

我将函数切换与动态插入的 div 一起使用，而不是仅运行特定元素，切换执行所有 div 内容。

HTML：

<div style="text-align: center;">
    <p class="button-style add-comment"><a href="#">Add Comment</a></p>
    <div class="insert-comment" style="display: none;">
        <textarea rows="8" cols="50" class="insert-comment-text"></textarea>
    </div>
</div>

jQuery：

$(document).on('click', '.add-comment', function(e){
    $(".insert-comment").toggle(); 
});

如何只打开一个特定的 div 而不是全部？

Answer 1

我猜你只想打开下一个 div。如果是这样，而不是

 $(".insert-comment").toggle();

利用

 $(this).next("div.insert-comment").toggle();

Answer 2

我会添加链接以在标签上开始“切换”，<a>然后使用下面的代码：

JavaScript：

$(".add-comment").onClick(function(){
    $(".insert-comment").toggle();
});

HTML：

<div style="text-align: center;">
    <p class="button-style"><a href="#" class="add-comment">Add Comment</a></p>
    <div class="insert-comment" style="display: none;">
        <textarea rows="8" cols="50" class="insert-comment-text"></textarea>
    </div>
</div>

Answer 3

也许这就是你需要的？

$(this).next(".insert-comment").toggle();

事实上，如果所有带有类add-comment的元素后面总是跟着需要切换的 div，那么第二个选择器只会让你慢下来：

$(document).on('click', '.add-comment', function(e){
    $(this).next().toggle();
});

Answer 4

只需相对更改您的代码，这样：

$(document).on('click', '.add-comment', function(e){
    $(this).next().toggle();
});

或者更具体地说，尝试：

$(document).on('click', '.add-comment', function(e){
    $(this).next(".insert-comment").toggle();
});