如何切换具有相同ID或类的特定字段？

Question

'comment'字段有'id'和'class'，我不能给出一个唯一的'id'，因为它来自数据库（动态输出）。我试图用Jquery“切换”（隐藏和显示），但是当我点击一个特定的“注释”字段时，所有的形式（textarea）都出现了（切换）。如何切换具有相同ID或类的特定字段？

$(".commentForm").hide();
    $(".askForComment").click(function(){
    $(".commentForm").toggle();
});
<div id='comments'>
   <div id='askForComment' class='askForComment'>Comments?</div>
   <div id='viewComments'></div>
   <form id='commentForm' class='commentForm'>
        <textarea cols='20' rows='2'></textarea>
        <input type='button'>
   </form>
</div><!-- this element is looped (dynamic) -->

Answer 1

您应该在此处定位.commentForm：

 $(".askForComment").click(function(){
    $(this).siblings(".commentForm").toggle();
 });

这将切换.commentForm附近的askForComment。或者，你可以这样做：

 $(".askForComment").click(function(){
    $(this).parent().find(".commentForm").toggle();
 });

希望这有帮助！

Answer 2

改变这个：

$(".askForComment").click(function(){
    $(".commentForm").toggle();
});

对此：

$("#comments").on('click', ".askForComment", function(){
    $(this).next(".commentForm").toggle();
});

您不想使用.siblings()，因为它会获得所有匹配的兄弟姐妹。您想使用.next()，因为它只会获得最接近的一个。

Answer 3

试试这个

$(".askForComment").on("click",function(){
    $(this).next(".commentForm").toggle();
 });

因为在运行时形成的HTML意味着click loding之后更喜欢使用DOM

，所以最好选择而不是$(".askForComment").on("click",function(){