Проблема с добавлением текстовой области к определенному комментарию

ProgramBox

Проблема с добавлением текстовой области к определенному комментарию

Post author:admin
Запись опубликована:29 мая, 2023
Post category:Вопросы по программированию

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

Я пытаюсь написать 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>

1. Он делает именно то, что вы просили, изменяя HTML div с id = "reply" помощью. Проблема в том, что у вас есть два divs, которые используют один и тот же идентификатор, который является недопустимым HTML. Исправьте свой HTML, проблема исчезнет.

2. Спасибо Tibrogargan, я изменил идентификатор на класс, но я все еще получаю тот же результат: (

3. Вы имеете в виду, что вы изменили свой селектор ( $("div#reply") на ( $("div.reply") ) или что вы добавили класс в каждый контейнер textarea div , а также изменили свой селектор для использования нового класса? Возможно, есть идея обновить ваш вопрос новым кодом

4. Я изменил идентификатор на класс («reply9»), а также изменил селектор $(‘div.reply9’).

5. Вы изменили ее на класс, но они по-прежнему имеют один и тот же класс, не так ли? Конечно, это меняет оба. Вам нужно присвоить им разные идентификаторы или разные классы или придумать какой-то другой способ их выбора.

Ответ №1:

У вас есть 2 раздела с одинаковым идентификатором «reply». Это заставляет вашу $("div#reply").html(... команду добавлять ее к ним обоим.

Идентификаторы должны быть уникальными. У вас не должно быть более 1 элемента с одинаковым атрибутом ID.
Если селектор jQuery соответствует более чем одному элементу, он вызовет html( метод для них обоих.

Ответ №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 ответа и отзывы вместе.

И изменил обработчики событий с markup на script, просто чтобы упростить привязку событий.

1. Привет, Sreekanth, это все еще дает мне тот же результат.

2. Я вижу, что раздел ответа добавляется только к одному разделу комментариев. разве это не то, что вы ищете? при нажатии на кнопку в ответе отображается только одна текстовая область.