显示/隐藏每个部分的最新3条评论

Question

我的网页有多个问题，每个问题有多个评论。在页面加载时，我想显示每个问题的三个最新评论，并隐藏其余部分。每个问题都有一个显示/隐藏所有旧评论的链接。

问题是，当显示问题1的所有评论时，我点击显示问题2的所有内容，对问题1的所有旧评论都隐藏了。我希望每个显示/隐藏按钮仅影响该问题的评论。

<style type="text/css"> 
    .user-comment-box { display:none } 
</style> 

<div class="comment-box-container"> 
    <div class="comment-box"> <a class="see-more">Show all comments</a> 
    <div class="user-comment-box"> 0 </div> 
    <div class="user-comment-box"> 1 </div> 
    <div class="user-comment-box"> 2 </div> 
    <div class="user-comment-box"> 3 </div> 
    <div class="user-comment-box"> 4 </div> 
    <div class="user-comment-box"> 5 </div> 
    <div class="user-comment-box"> 6 </div> 
    </div> 
</div><br /> 

<div class="comment-box-container"> 
    <div class="comment-box"> <a class="see-more">Show all comments</a> 
    <div class="user-comment-box"> 0 </div> 
    <div class="user-comment-box"> 1 </div> 
    <div class="user-comment-box"> 2 </div> 
    <div class="user-comment-box"> 3 </div> 
    <div class="user-comment-box"> 4 </div> 
    <div class="user-comment-box"> 5 </div> 
    <div class="user-comment-box"> 6 </div> 
    </div> 
</div> 

$(function() { 
    // Always show last 3 comments: 
    $(".comment-box").each(function(index) { 
     $(this).children(".user-comment-box").slice(-3).show(); 
    }); 

    $(".see-more").click(function(e) { // click event for load more 
     e.preventDefault(); 
     var link = $(this); 
     $(this).siblings(".user-comment-box:hidden").show(1, function() { 
      if ($(this).is(':visible')) { 
       link.text('Show less comments'); 
       $(this).addClass('showing-more') 
      } 
     }); 

     if ($('div').hasClass('showing-more')) { 
      link.text('Show all comments'); 
      $('.showing-more').hide(1); 
      $('div').removeClass("showing-more"); 
     } 
    }); 
}); 

小提琴：http://jsfiddle.net/5cc7qvk6/22/

Answer 1

为了使这项工作，你可以修改的逻辑，这样一类是在a元素足见其子项的状态下切换 - 无论是显示或隐藏。然后您可以更改链接文本并根据需要隐藏/显示子div。试试这个：

$(function() { 
 
    $(".comment-box").each(function(index) { 
 
    $(this).children(".user-comment-box").slice(-3).show(); 
 
    }); 
 

 
    $(".see-more").click(function(e) { 
 
    e.preventDefault(); 
 
    var $link = $(this); 
 
    var $div = $link.closest('.comment-box'); 
 

 
    if ($link.hasClass('visible')) { 
 
     $link.text('Show all comments'); 
 
     $div.children(".user-comment-box").slice(0, -3).slideUp() 
 
    } else { 
 
     $link.text('Show less comments'); 
 
     $div.children(".user-comment-box").slideDown(); 
 
    } 
 

 
    $link.toggleClass('visible'); 
 
    }); 
 
});

.user-comment-box { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="comment-box-container"> 
 
    <div class="comment-box"> 
 
    <a href="#" class="see-more">Show all comments</a> 
 
    <div class="user-comment-box">0</div> 
 
    <div class="user-comment-box">1</div> 
 
    <div class="user-comment-box">2</div> 
 
    <div class="user-comment-box">3</div> 
 
    <div class="user-comment-box">4</div> 
 
    <div class="user-comment-box">5</div> 
 
    <div class="user-comment-box">6</div> 
 
    </div> 
 
</div><br /> 
 

 
<div class="comment-box-container"> 
 
    <div class="comment-box"> 
 
    <a href="#" class="see-more">Show all comments</a> 
 
    <div class="user-comment-box">0</div> 
 
    <div class="user-comment-box">1</div> 
 
    <div class="user-comment-box">2</div> 
 
    <div class="user-comment-box">3</div> 
 
    <div class="user-comment-box">4</div> 
 
    <div class="user-comment-box">5</div> 
 
    <div class="user-comment-box">6</div> 
 
    </div> 
 
</div>

Answer 2

编辑：

尝试使用此代码代替，这是更可靠的代码：

$(function(){ 
    // Always show last 3 comments: 
    $(".comment-box").each(function(index) { 
     $(this).children(".user-comment-box").slice(-3).show(); 
    }); 

    $(".see-more").click(function(e){ // click event for load more 
     e.preventDefault(); 
     var link = $(this); 

     if (link.hasClass('showing-more')) { 
      link.siblings(".user-comment-box.extended").hide(1, function() { 
       link.text('Show more comments'); 
       link.removeClass('showing-more'); 
      }); 
      link.siblings(".user-comment-box.extended").removeClass('extended'); 
     } else { 
      link.siblings(".user-comment-box:hidden").addClass('extended') 
      link.siblings(".user-comment-box:hidden").show(1, function() { 
       link.text('Show less comments'); 
       link.addClass('showing-more'); 
      }); 
     } 
    }); 
}); 

fiddle

Answer 3

您使用的是通用的选择器$（'di V'），其选择隐藏所有的div元素，所以你可以试试这个fiddle

$(function(){ 

// Always show last 3 comments: 
$(".comment-box").each(function(index) { 
$(this).children(".user-comment-box").slice(-3).show(); 
}); 

$(".see-more").click(function(e){ // click event for load more 
    e.preventDefault(); 
    var link = $(this); 
    $(this).siblings(".user-comment-box:hidden").show(1, function() { 
if ($(this).is(':visible')) { 
     link.text('Show less comments');  
     $(this).addClass('showing-more') 
}   
}); 
    console.log($(this).siblings()); 
if ($('div').hasClass('showing-more')) { 
    link.text('Show all comments'); 
    $(this).siblings('.showing-more').hide(1); 
    $(this).siblings('.showing-more').removeClass("showing-more"); 
//$('div').removeClass("showing-more"); this was removing the class ".showing-more" from all the divs 
} 

}); 
});