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

你快到了。你只需要做两个小改动： -

从=循环中删除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

动态添加n个div同时删除n个div

1 个答案: