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。试试这个：

＆＃13;

$(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');
  });
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

编辑：

请尝试使用此代码，它是更可靠的代码：

html = driver.page_source
f = open('savepage.html', 'w')
f.write(html.encode('utf-8'))
f.close()

fiddle

Answer 3

您正在使用通用选择器$（＆＃39; div＆＃39;）选择器隐藏所有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
}

});
});

显示/隐藏所有评论，但每个部分最新3条

3 个答案: