jQuery .next(). SlideToggle() не работает

Я создаю свои собственные системы комментариев с нуля. Сами комментарии динамически генерируются из тех, что находятся в базе данных, и для каждого комментария я добавляю текстовую область ответа и кнопку, чтобы пользователь мог отправлять ответ кому-то.jQuery .next(). SlideToggle() не работает

Проблема заключается в том, что при нажатии ссылки ответа открывается окно ответа для каждого комментария не только для комментария, на который пользователь хочет ответить.

HTML-:

<a class="comment-reply">Reply</a> 

<!--REPLY BOX --> 
<div class="reply-box clearfix"> 
    <?php if($signed_in) { ?> 
    <!-- reply input textarea --> 
    <div class="container"> 
     <form id="reply-form"> 
      <textarea id="reply" rows="1" placeholder="Your reply here..."></textarea> 
      <p><input id="reply-btn" type="submit" class="btn btn-primary floatL" value="Post reply" /></p> 
     </form> 
    </div> 
    <?php } ?> 
</div>

И JQuery:

<script>  
$(document).ready(function(e) { 

    //hide reply box on page load 
    $('.reply-box').hide(); 

    //show each individual reply box on click 
    $('.comment-reply').click(function() { 
     //$('.reply-box').stop().slideToggle("fast"); /* This opens all div */ 
     $(this).next('.reply-box').stop().slideToggle("fast"); /* This doesn't work at all */ 
    }); 
}); 
</script>

Что я делаю неправильно?

редактировать

Ok это полный HTML:

<!--POSTED COMMENT--> 
       <div id="comment-<?php echo $comment_id; ?>" class="media"> 
        <div class="pull-left"> 
         <a href="#"><img style="height: 48px; width: 48px;" src="<?php echo $c_member_avatar; ?>" class="img-rounded" alt=""></a> 
         <div style="font-size:1.2em"> 
          <a style="color: #888888;" href="#"> 
           <span class="glyphicon glyphicon-thumbs-up"></span> 
          </a> 
          <a style="color: #888888;" href="#"> 
           <span class="glyphicon glyphicon-thumbs-down"></span> 
          </a> 
         </div> 
        </div> 
        <div class="media-body"> 
        <h5 style="margin: 0 0 5px 0;"><a href="#"><?php echo $c_member_username; ?></a><small>&nbsp;&nbsp;<?php echo $comment_timestamp; ?> ago</small><small style="margin-right: 20px;" class="floatR"><a id="comment-flagged" href="#"><span style="color: #5A5A5A" title="Flag as inappropriate" class="glyphicon glyphicon-flag"></span></a></small></h5> 
        <p class="clearfix" style="margin-bottom:0px;"><?php echo $commentPosted; ?></p> 
        <?php if($signed_in && $username == $c_member_username) { ?> 
         <small class="floatL"><a class="comment-reply" id="<?php echo $comment_id; ?>" >Reply</a></small> 
         <small class="floatL"><a class="comment-remove" id="<?php echo $comment_id; ?>">Remove comment</a></small> 
        <?php } else if($signed_in) { ?> 
         <small class="floatL"><a class="comment-reply" id="<?php echo $comment_id; ?>" >Reply</a></small> 
        <?php } else { ?> 
         <small class="floatL"><a href="signin.php" class="ilightbox" id="signin-reply" data-options="width:310, height:300">Sign in to reply to this comment</a></small> 
        <?php } ?> 
        </div> 
       </div> 
       <!--END POSTED COMMENT--> 

       <!--REPLY BOX --> 
        <div class="reply-box clearfix"> 
         <?php if($signed_in) { ?> 
         <!-- comment input textarea --> 
         <div id="comment-box" class="container"> 
          <form id="reply-form"> 
           <textarea id="reply" rows="1" placeholder="Your reply here..."></textarea> 
           <p style="padding-top: 15px;"><input id="reply-btn" type="submit" class="btn btn-primary floatL" value="Post reply" /></p> 
           <p style="color:red; padding-left: 140px;" id="error"></p> 
          </form> 
         </div> 
         <?php } ?> 
        </div> 
       <!--END REPLY BOX-->

не возражаете стиль, я до сих пор прототипирования

редактировать - добавляемые оказана страница

<!--POSTED COMMENT--> 
       <div id="comment-139" class="media"> 
        <div class="pull-left"> 
         <a href="#"><img style="height: 48px; width: 48px;" src="members/nicklaw/assassin_creed_black_flag _2-140x140.jpg" class="img-rounded" alt=""></a> 
         <div style="font-size:1.2em"> 
          <a style="color: #888888;" href="#"> 
           <span class="glyphicon glyphicon-thumbs-up"></span> 
          </a> 
          <a style="color: #888888;" href="#"> 
           <span class="glyphicon glyphicon-thumbs-down"></span> 
          </a> 
         </div> 
        </div> 
        <div class="media-body"> 
        <h5 style="margin: 0 0 5px 0;"><a href="#">nicklaw</a><small>&nbsp;&nbsp;9 seconds ago</small><small style="margin-right: 20px;" class="floatR"><a id="comment-flagged" href="#"><span style="color: #5A5A5A" title="Flag as inappropriate" class="glyphicon glyphicon-flag"></span></a></small></h5> 
        <p class="clearfix" style="margin-bottom:0px;">this is a comment</p> 
               <small class="floatL"><a class="comment-reply" id="139" >Reply</a></small> 
         <small class="floatL"><a class="comment-remove" id="139">Remove comment</a></small> 
              </div> 
       </div> 
       <!--END POSTED COMMENT--> 

       <!--REPLY BOX --> 
        <div class="reply-box clearfix"> 
                <!-- comment input textarea --> 
         <div id="comment-box" class="container"> 
          <form id="reply-form"> 
           <textarea id="reply" rows="1" placeholder="Your reply here..."></textarea> 
           <p style="padding-top: 15px;"><input id="reply-btn" type="submit" class="btn btn-primary floatL" value="Post reply" /></p> 
           <p style="color:red; padding-left: 140px;" id="error"></p> 
          </form> 
         </div> 
               </div> 
       <!--END REPLY BOX-->

источник

2013-12-04 Nicholas Law

Не вижу проблемы. Я думаю, что он работает. Проверьте [jsfiddle] (http://jsfiddle.net/xkLD5/) –

Это работает для меня: http://jsfiddle.net/fjL5L/1/ –

Это тоже работает для меня: http://jsfiddle.net/ WbLV8/ –

Может быть, следующий код поможет, я использую parentElement текущего элемента, а затем получить текстовое поле, которое находится в той же группе. При прикреплении обработчика кликов я использую div с классом comments-container и прикрепляю его только щелчком для привязок (второй параметр в функции .on).

<!DOCTYPE html> 
<html> 
<head> 
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
</head> 
<body> 
    <div class="comments-container"> 
     <div class="comment"> 
     Comment1 
     <a href="#">comment</a><br> 
     <textarea></textarea> 
     </div> 
     <div class="comment"> 
     Comment2 
     <a href="#">comment</a><br> 
     <textarea></textarea> 
     </div> 
     <div class="comment"> 
     Comment3 
     <a href="#">comment</a><br> 
     <textarea></textarea> 
     </div> 
    </div> 
    <script> 
     $("textarea").hide(); 
     $(".comments-container").on("click","a",function(e){ 
      e.preventDefault(); 
      $("textarea").hide(); 
      $(this.parentElement.getElementsByTagName("textarea")[0]) 
      .stop().slideToggle("fast"); 
     }); 
    </script> 
</body> 
</html>

источник

2013-12-04 23:55:44 HMR

Проблема заключается в том, что .reply-бокс не на том же уровне в DOM в качестве ссылки .comment-ответ, который щелкнул (т.е. а не родственный). Если вы видите documentation for .click, вы увидите, что он ищет только siblings.

Я думаю, что вы хотите .parents(".media").next(".reply-box")

источник

2013-12-05 18:58:32 thebitguru

jQuery .next(). SlideToggle() не работает

ответ

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