Показать HTML для определенного div по щелчку

У меня есть HTML и Ajax, поэтому, если вы нажмете определенное изображение (класс reply-quote ниже), оно инициирует некоторый Ajax для эха HTML-кода в другом месте на странице.Показать HTML для определенного div по щелчку

Как показано ниже, файл HTML содержит один и тот же блок divs несколько раз. Моя проблема в том, что если пользователь нажимает на изображение, как я могу сделать Ajax показать HTML (в пределах show-reply div) для этого конкретного блока, а не для всех?

<!-- BLOCK ONE --> 
<div class="style1"> 
    <div class="style2"> 
    <img src="image.png" class="reply-quote" /> 
     <div class="style3"> 
     <div class="style4"> 
      <div id="show-reply"></div> 
      <div class="reply-box"> 
      <form class="reply-container no-margin" method="POST" action=""> 
       <textarea class="reply-field" name="new_comment" placeholder="Write a reply..."></textarea> 
       <button name="submit" class="btn" type="submit">Post</button> 
      </form> 
      </div> 
     </div> 
     </div> 
    </div> 
</div> 

<!-- BLOCK TWO --> 
<div class="style1"> 
    <div class="style2"> 
    <img src="image.png" class="reply-quote" /> 
     <div class="style3"> 
     <div class="style4"> 
      <div id="show-reply"></div> 
      <div class="reply-box"> 
      <form class="reply-container no-margin" method="POST" action=""> 
       <textarea class="reply-field" name="new_comment" placeholder="Write a reply..."></textarea> 
       <button name="submit" class="btn" type="submit">Post</button> 
      </form> 
      </div> 
     </div> 
     </div> 
    </div> 
</div>

Вот JQuery я прямо сейчас:

$(document).ready(function() {  
    $(".reply-quote").click(function() { 
    $.ajax({ 
     url: 'assets/misc/show_reply.php', // this file simply echoes back the HTML to the `show-reply` div 
     type: "POST", 
     data: {post_id: $(this).attr('id')}, 
     success: function(data) { 
     $("#show-reply").append(data); // this is where the problem lies 
     } 
    }); 
    }); 
});

В моем понимании, я должен каким-то образом реализовать $(this), parent(), find(), etc. вместо текущей строки, я использую ($("#show-reply").append(data);). Вопрос в том, должна ли эта строка быть такой, чтобы, щелкнув изображение, он отображает только HTML для этого конкретного блока?

Пожалуйста, помогите!

источник

2013-09-05 John

Первое: ID должны быть уникальными в документе, используйте атрибут класса вместо этого для show-reply и других элементов, где id повторяется

<div class="show-reply"></div>

, то вам нужно найти show-reply рядом с щелкнуло reply-quote изображений

$(document).ready(function() { 

    $(".reply-quote").click(function() { 
     var $reply = $(this); 
     $.ajax({ 
      url: 'assets/misc/show_reply.php', // this file simply echoes back the HTML to the `show-reply` div 
      type: "POST", 
      data: {post_id: $(this).attr('id')}, 
      success: function(data) { 
       $reply.closest('.comment-container').find(".show-reply").append(data); 
      } 
     }); 
    }); 
});

источник

2013-09-05 00:05:21

Не работает. Когда я щелкнул изображение, он ничего не сделал. :/ – John

@John была ошибка, которую я исправил теперь '$ reply.next(). Find (". Show-reply ")' –

Не будет ли это причиной неопределенного поведения? Поскольку ajax является асинхронным, нет гарантии, что '$ reply' будет по-прежнему оставаться одним и тем же значением после того, как вы попадете в блок успеха. – Jordan

Вы должны изменить id = "show-reply" на class = "show-reply" в html, а затем в JS change $ ("# show-reply"). Append (data); до $ (this) .parent (". show-reply"). append (data);

источник

2013-09-05 00:08:02

попробовать это

$("div").click(function(e) { 
      if($(e.target).is('.reply-quote')){ 
       e.preventDefault(); 
       return; 
      } 
      alert("work "); 
     });

источник

2013-09-05 04:17:53 RahulG

Показать HTML для определенного div по щелчку

ответ

Смежные вопросы