將文本區域附加到特定註釋中的問題

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標記到組的答覆股利和評論在一起。

並將事件處理程序從標記更改爲腳本，以便更容易地綁定事件。