将文本区域附加到特定注释中的问题

Question

我正在尝试编写HTML代码以便能够回复评论。我在下面的代码中遇到的问题是，当我单击答复按钮时，它会将回复文本区域附加到注释1和注释2.我能做些什么来使其仅将文本区域附加到相关注释。

<script> 
    function reply2comment() { 

    $("div#reply").html('<form action="" method="GET" id="rati"><textarea style="border-radius:0em" name="comment" id="comment" placeholder="maximum 100 characters" maxlength="100" rows="4" cols="60" required></textarea>'+ 
     '<div class="save_reply"><input type="submit" data-theme="e" id="send_reply" value="save"/></div></form>').trigger('create'); 
     } 

</script> 

<div class="userReviews"> 
<div class="userDP_mP"><img src="display_pics/yy.jpg" alt=""/></div> 
<a href="#" data-ajax="false"><div class="userName_mP">Tim</div></a> 

    <img style="max-width:95%" class="reviewRateImage" src="ratingPlanets/hot_earth.png" alt=""/> 

    <div class="review_mP"><p>comment 1</p></div> 
</div> 
<!--------------------------------> 
<div class="reply"> 
<input type="button" data-theme="e" onClick="reply2comment()" value="reply"/> 
</div> 
<!----reply text area-----> 
<div style="width:80%; margin-left:15%;" id="reply"></div> 


<div class="userReviews"> 
<div class="userDP_mP"><img src="display_pics/xx.jpg" alt=""/></div> 
<a href="#" data-ajax="false"><div class="userName_mP">David</div></a> 

    <img style="max-width:95%" class="reviewRateImage" src="ratingPlanets/hot_earth.png" alt=""/> 

    <div class="review_mP"><p>comment 2</p></div> 
</div> 
<!--------------------------------> 
<div class="reply"> 
<input type="button" data-theme="e" onClick="reply2comment()" value="reply"/> 
</div> 
<!----reply text area-----> 
<div style="width:80%; margin-left:15%;" id="reply"></div> 

Answer 1

你有2周的div相同的ID “回复”。这使得您的$("div#reply").html(...命令将它附加到它们两个。

1. ID应该是唯一的。你不应该有超过1个具有相同ID属性的元素。
2. 如果一个jQuery选择器匹配多个元素，它将在这两个元素上调用html(方法。

Answer 2

这里是你可以做什么。

$(document).ready(function() { 
 
    $(".reply").bind("click", 
 
    function reply2comment(event) { 
 
     var $replyContainer = $(event.currentTarget).siblings("#reply"); 
 
     $replyContainer.html('<form action="" method="GET" id="rati"><textarea style="border-radius:0em" name="comment" id="comment" placeholder="maximum 100 characters" maxlength="100" rows="4" cols="60" required></textarea>' + 
 
     '<div class="save_reply"><input type="submit" data-theme="e" id="send_reply" value="save"/></div></form>').trigger('create'); 
 

 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="userReviews"> 
 
    <div class="userDP_mP"> 
 
    <img src="display_pics/yy.jpg" alt="" /> 
 
    </div> 
 
    <a href="#" data-ajax="false"> 
 
    <div class="userName_mP">Tim</div> 
 
    </a> 
 

 
    <img style="max-width:95%" class="reviewRateImage" src="ratingPlanets/hot_earth.png" alt="" /> 
 

 
    <div class="review_mP"> 
 
    <p>comment 1</p> 
 
    </div> 
 

 
    <!--------------------------------> 
 
    <div class="reply"> 
 
    <input type="button" data-theme="e" value="reply" /> 
 
    </div> 
 
    <!----reply text area-----> 
 
    <div style="width:80%; margin-left:15%;" id="reply"></div> 
 
</div> 
 

 
<div class="userReviews"> 
 
    <div class="userDP_mP"> 
 
    <img src="display_pics/xx.jpg" alt="" /> 
 
    </div> 
 
    <a href="#" data-ajax="false"> 
 
    <div class="userName_mP">David</div> 
 
    </a> 
 

 
    <img style="max-width:95%" class="reviewRateImage" src="ratingPlanets/hot_earth.png" alt="" /> 
 

 
    <div class="review_mP"> 
 
    <p>comment 2</p> 
 
    </div> 
 

 
    <!--------------------------------> 
 
    <div class="reply"> 
 
    <input type="button" data-theme="e" value="reply" /> 
 
    </div> 
 
    <!----reply text area-----> 
 
    <div style="width:80%; margin-left:15%;" id="reply"></div> 
 
</div>

我修改你user_reviews标记到组的答复股利和评论在一起。

并将事件处理程序从标记更改为脚本，以便更容易地绑定事件。