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

Question

我正在开发评论供稿。 作为默认值，我将隐藏所有注释更多的4条。如果还有4条注释，并且单击了显示更多锚点，则最多显示4条注释。 我的问题是，如果现在我动态添加更多注释，则CSS会在Feed的中间隐藏注释。 当我添加评论时，具有第四位置的评论将被隐藏。 但是，单击锚点时显示的所有其他注释仍在显示。 我想要的是：在页面加载时仅显示四个注释。 如果在单击锚点之前添加了注释，则隐藏第四个注释并在顶部显示新注释（正在运行）。 如果单击锚点（无论多少次），则隐藏当前显示的最后一条评论，并在顶部显示新评论。 我下面有一个工作片段。 我希望我能使自己理解。

 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);
    }

});

Answer 2

您可以将此代码添加到#postButton click事件中：

  // if more button was clicked      
  if (jQuery('div.commentsWrapper > div:visible').length > 4) {
    // hide the last visible element
    jQuery('div.commentsWrapper > div:visible:last').fadeOut(300);
  }

这是一个工作的jsfiddle