javascript - 动态添加内容时从底部隐藏html元素

Question

我正在开发评论提要。默认情况下，我隐藏了 4 条以上的所有评论。如果有超过 4 条评论并且我点击了显示更多 anchor ，则最多显示 4 条评论。我的问题是，如果我现在动态添加更多评论，CSS 会将评论隐藏在提要中间。当我添加评论时，排名第四的评论会被隐藏。但是当您单击 anchor 时显示的所有其他评论仍在显示。我想要的是:在页面加载时只显示四个评论。如果在单击 anchor 之前添加了评论，则隐藏第四条评论并在顶部显示新评论(现在正在工作)。如果点击 anchor (无论多少次)隐藏当前显示的最后一条评论并在顶部显示新评论。我在下面有一个工作片段。我希望我能让自己被理解。

var _divNum = jQuery('div.commentsWrapper > div').length;
if (_divNum > 4) {
  $('.showMoreAnchorWrapper').fadeIn(300);
}

jQuery(document).on('click', '#showMoreAnchor', function() {

  jQuery('div.commentsWrapper > div:hidden').slice(0, 4).slideDown(300);
  if (jQuery('div.commentsWrapper > div').length === jQuery('div.commentsWrapper > div:visible').length) {

    jQuery('#showMoreAnchor').fadeOut(300);
  }
});

jQuery(document).on('click', "#postButton", function(e) {
  var textAreaContent = jQuery("#textAreaInput").val().trim();
  var html = "<div class='commentAreaWrapper'><div class='titleStyle'><span class='imgWrapper'><img class='' style='min-width:48px; min-height:48px; clip:rect(0px, 48px, 48px, 0px); max-width:48px' src='' alt='Admin'></span>Admin</div><div class='commentArea'>" + textAreaContent + "</div></div>";

  jQuery(html).prependTo(".commentsWrapper").hide().slideDown();;

  var _divNum = jQuery('div.commentsWrapper > div').length;
  if (_divNum > 4) {
    jQuery('.showMoreAnchorWrapper').fadeIn(300);
  }

});

.globalWrapper {
  height: 50%;
  width: 50%;
  margin-bottom: 15px;
  margin-left: 10px;
}

.commentsWrapper {
  padding-bottom: 10px;
  padding-top: 10px;
  border-radius: 5px;
  background-color: #EBEDEF;
}

.commentArea {
  padding: 5px 5px 5px 5px;
  background-color: #D5D8DC;
  margin-top: 0px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  font-family: "Segoe UI Semilight", "Segoe UI", "Segoe", Tahoma, Helvetica, Arial, sans-serif;
  font-size: 1.15em;
  word-wrap: break-word
}

.titleStyle {
  padding-left: 8px;
  background-color: #FBF1E7;
  margin-top: 10px;
  padding-bottom: 2px;
  padding-top: 6px;
  border-bottom: 1px solid grey;
}

div.commentsWrapper>div:nth-child(1)>div.titleStyle {
  margin-top: 0px;
}

.inputWrapper {
  //background-color:#EBEDEF;              
}

.imgWrapper {
  margin-right: 7px;
}

#textAreaInput {
  width: 100%;
  max-width: 97%;
  height: 70px;
  ;
  resize: none;
  text-align: left;
  padding-left: 0.4;
  padding-top: 0.4;
  padding-bottom: 0.4em;
  padding-right: 0.6em;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  margin-bottom: 5px;
  word-wrap: break-word
}

.buttonWrapper {
  margin - left: 10px;
  height: 35px;
}

#postButton {
  float: right;
}

.commentAreaWrapper {
  margin-left: auto;
  margin-right: auto;
  width: 94%;
}

.commentAreaWrapper:hover {
  /*box-shadow:10px 10px 10px;*/
  //border-bottom: 2px solid grey;
  //border-right: 2px solid grey;
  //border-radius: 5px;
}

div.commentsWrapper>div:nth-child(n+5) {
  display: none;
}

.showMoreAnchorWrapper {
  text-align: center;
  margin-top: 10px;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="globalWrapper">
  <div class="inputWrapper">
    <textarea id="textAreaInput">test test</textarea>

    <div class="buttonWrapper">
      <button id="postButton" type="button">Inlägg</button>
    </div>
  </div>

  <div class="commentsWrapper">
    <div class="commentAreaWrapper">
      <div class="titleStyle"><span class="imgWrapper"><img class="" style="min-width:48px; min-height:48px; clip:rect(0px, 48px, 48px, 0px); max-width:48px" src="" alt="Admin"></span>Admin</div>
      <div class="commentArea">1</div>
    </div>
    <div class="commentAreaWrapper">
      <div class="titleStyle"><span class="imgWrapper"><img class="" style="min-width:48px; min-height:48px; clip:rect(0px, 48px, 48px, 0px); max-width:48px" src="" alt="Admin"></span> Admin</div>
      <div class="commentArea">2</div>
    </div>
    <div class="commentAreaWrapper">
      <div class="titleStyle"><span class="imgWrapper"><img class="" style="min-width:48px; min-height:48px; clip:rect(0px, 48px, 48px, 0px); max-width:48px" src="" alt="Admin"></span>Admin</div>
      <div class="commentArea">3</div>
    </div>
    <div class="commentAreaWrapper">
      <div class="titleStyle"><span class="imgWrapper"><img class="" style="min-width:48px; min-height:48px; clip:rect(0px, 48px, 48px, 0px); max-width:48px" src="" alt="Admin"></span>Admin</div>
      <div class="commentArea">4</div>
    </div>
    <div class="commentAreaWrapper">
      <div class="titleStyle"><span class="imgWrapper"><img class="" style="min-width:48px; min-height:48px; clip:rect(0px, 48px, 48px, 0px); max-width:48px" src="" alt="Admin"></span>Unisight Admin</div>
      <div class="commentArea">5</div>
    </div>
    <div class="commentAreaWrapper">
      <div class="titleStyle"><span class="imgWrapper"><img class="" style="min-width:48px; min-height:48px; clip:rect(0px, 48px, 48px, 0px); max-width:48px" src="" alt="Admin"></span>Admin</div>
      <div class="commentArea">6</div>
    </div>
    <div class="commentAreaWrapper">
      <div class="titleStyle"><span class="imgWrapper"><img class="" style="min-width:48px; min-height:48px; clip:rect(0px, 48px, 48px, 0px); max-width:48px" src="" alt="Admin"></span>Admin</div>
      <div class="commentArea">7</div>
    </div>
  </div>
  <div class="showMoreAnchorWrapper">
    <a href="#" id="showMoreAnchor">Visa fler</a>
  </div>
</div>

Answer 1

用这个替换 JS 代码并测试我希望这会根据您的要求工作:)

var _divNum = jQuery('div.commentsWrapper > div').length;
if (_divNum > 4) {
    $('.showMoreAnchorWrapper').fadeIn(300);
}

jQuery(document).on('click', '#showMoreAnchor', function() {
    $($("#showMoreAnchor").parents(".globalWrapper")[0]).children(".commentsWrapper").attr("track", true);
    jQuery('div.commentsWrapper > div:hidden').slice(0, 4).slideDown(300);
    if (jQuery('div.commentsWrapper > div').length === jQuery('div.commentsWrapper > div:visible').length) {

        jQuery('#showMoreAnchor').fadeOut(300);
    }
});

jQuery(document).on('click', "#postButton", function(e) {
    var textAreaContent = jQuery("#textAreaInput").val().trim();
    var html = "<div class='commentAreaWrapper'><div class='titleStyle'><span class='imgWrapper'><img class='' style='min-width:48px; min-height:48px; clip:rect(0px, 48px, 48px, 0px); max-width:48px' src='' alt='Admin'></span>Admin</div><div class='commentArea'>" + textAreaContent + "</div></div>";

    jQuery(html).prependTo(".commentsWrapper").hide().slideDown();;
    if ($($("#showMoreAnchor").parents(".globalWrapper")[0]).children(".commentsWrapper").attr("track")) {
        var visibleBlocks = jQuery('div.commentsWrapper > div:visible');
        var lastBlock = visibleBlocks[visibleBlocks.length - 1];
        $(lastBlock).css("display", "none")
        jQuery('#showMoreAnchor').fadeIn(300);
    };

    var _divNum = jQuery('div.commentsWrapper > div').length;
    if (_divNum > 4) {
        jQuery('.showMoreAnchorWrapper').fadeIn(300);
    }

});