javascript - 动态添加n个div同时移除n个div

Question

在这里，我为容器编写代码，一次只需要显示 5 个项目。如果假设同时添加 2 个元素，则应删除 2 个元素。我在 setTimeout 中遇到了一些问题> 函数。在这里，我调用了函数 2 次。当第一次调用函数时，它添加 1 个元素并同时删除一个。当第二次调用函数时，我通过 setTimeout(function({_addContent(2)}, 8000 ) 这里它添加了 2 个元素但只删除了 1 个元素 bcz 它计数它是计数器。请帮我解决问题。

演示:https://jsfiddle.net/xddn8x04/

var followContainer = function() {
    var countdown;
    var count = 0;
    var _addContent = function(count) {

        var followlen = +$('.follow-container .set-follow > .follow').length;
        var _followcontent = ('.follow-suggestions .follow-container');
        var follow = '';
        for (var i = 0; i <= count; i++) {
            follow = ('<div class="follow"><div class="sidebar-img"><div class="img-block"><img class="pic" alt="Mikhael Ross" src="assets/img/person.png" height="60" width="60"><div class="side-icon"><i class="fa fa-plus sidebar-icon"></i></div></div></div><div class="center-block"><div class="name">mayank bliss</div><div class="detail">45777 followers</div></div><div class="right-block"><div title="May 22, 2015" class="date">2015-05-22</div></div></div>');
            $(follow).hide().appendTo('.follow-container .hide-follow').fadeIn(
                    '1000');
            $('.follow-container .set-follow').append(
                    $(".follow-container .hide-follow >.follow"));
            $(".follow-container .set-follow >.follow:lt(" + count + ")").fadeOut(
            '1000');
        }

    }
    var _events = function() {
        var timeoutHandle = window.setTimeout(function() {
            _addContent(1)
        }, 5000);
        setTimeout(function() {
            _addContent(2)
        }, 8000);
    }
    var _init = function() {
        _events();
    }
    return {
        init : _init
    }
}();

Answer 1

你快到了。你只需要 2 个小改动:-

从 for 循环中删除 =。因为这导致 _addContent(1) 循环两次，而 _addContent(2) 运行 3 次。

将 :visible 添加到 fadeOut，因为它针对的是已经隐藏的元素。

var followContainer = function() {
    var countdown;
    var count = 0;
    var _addContent = function(count) {
        var followlen = +$('.follow-container .set-follow > .follow').length;
        var _followcontent = ('.follow-suggestions .follow-container');
        var follow = '';
        for (var i = 0; i < count; i++) {
            follow = ('<div class="follow"><div class="sidebar-img"><div class="img-block"><img class="pic" alt="Mikhael Ross" src="assets/img/person.png" height="60" width="60"><div class="side-icon"><i class="fa fa-plus sidebar-icon"></i></div></div></div><div class="center-block"><div class="name">mayank bliss</div><div class="detail">45777 followers</div></div><div class="right-block"><div title="May 22, 2015" class="date">2015-05-22</div></div></div>');
            $(follow).hide().appendTo('.follow-container .hide-follow').fadeIn(
                    '1000');
            $('.follow-container .set-follow').append(
                    $(".follow-container .hide-follow >.follow"));
            $(".follow-container .set-follow >.follow:visible:lt(" + count + ")").fadeOut(
            '1000');
        }

    }
    var _events = function() {
        var timeoutHandle = window.setTimeout(function() {
            _addContent(1)
        }, 5000);
        setTimeout(function() {
            _addContent(2)
        }, 8000);
    }
    var _init = function() {
        _events();
    }
    return {
        init : _init
    }
}();
$(document).ready(function() {
    followContainer.init();
});

Fiddle