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

Question

“comment”字段有“id”和“class”，我不能给出唯一的“id”，因为它来自数据库（动态输出）。我曾尝试使用 Jquery 来“切换”（隐藏和显示），但是当我单击特定的“评论”字段时，所有表单（文本区域）都会出现（切换）。如何切换具有相同 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").on("click",function(){
    $(this).next(".commentForm").toggle();
 });

因为这是最好的选择，而不是click在运行时形成的 HTML 意味着在加载之后DOM更喜欢使用$(".askForComment").on("click",function(){

Answer 3

改变这个：

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

对此：

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

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