Question

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

<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个具有相同ID的div和＃34;回复＆＃34;。这使您的$("div#reply").html(...命令将它附加到它们两个。

ID应该是唯一的。您不应该拥有多个具有相同ID属性的元素。
如果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标记，将回复div和评论组合在一起。

并将事件处理程序从标记更改为脚本，只是为了更容易绑定事件。

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

2 个答案: