文章/答案/技术大牛

发布

社区首页 >问答首页 >jquery while循环在每个<li>被追加时对其进行fadeIn

问jquery while循环在每个<li>被追加时对其进行fadeIn
EN

Stack Overflow用户

提问于 2011-01-31 10:38:57

回答 2查看 1.2K关注 0票数 1

我试图摆弄这个概念，但我似乎不能让逻辑工作并坚持下去。

我想让用户输入一个数字并按下add链接，当他们这样做时，它会添加他们输入的数字作为联系人的数量，并将每个新联系人追加到一个<li>元素，然后一次淡入一个。如果用户要在文本字段中为其输入另一个数字，则将该新数字附加到li的末尾，并增加一个数字。

例如：

[_3_] [Add]
============
Contact 1
Contact 2
Contact 3

然后，如果他们决定再添加两个联系人：

[_2_] [Add]
============
Contact 1
Contact 2
Contact 3
Contact 4
Contact 5

这是我的代码: UL的ID是new-prospect-add-contacts

//-- Add more contacts

var counter = $("#new-prospect-add-contacts").size();

    $("#e").live("click", function(){


        var e = $("#new-prospect-additional-contact").val();
        while(counter < e)
        {
            $("#new-prospect-add-contacts").append("<li>").append("<span>Contact " + ++counter + "</span>").fadeIn(2000);
        }
        return false;
    });

行为：

我可以根据用户输入添加联系人的数量，但他们将闪存到<UL>中，而不会应用.fadeIn()

如果用户添加了更多的联系人，它会将其附加到底部，但会重新从2开始计数。

jquery

回答 2

Stack Overflow用户

回答已采纳

发布于 2011-01-31 11:16:59

我没有使用计数器，而是使用随着列表的增长而动态更新的$("#new-prospect-add-contacts").find('li').length来计算要添加的数量，这是基于我们开始时列表中已经存在的数量加上要添加的数量。

var $npac = $("#new-prospect-add-contacts"),
    addVal = parseInt($("#new-prospect-additional-contact").val(), 10) + $npac.find('li').length;

while ($npac.find('li').length < addVal) {
    // CODE
}

因为我们没有缓存长度，当我们向列表追加足够的li时，while循环将会中断。在while中，我们将li项附加为隐藏...

    var nLi = $('<li><span>Contact ' +
                parseInt($npac.find('li').length + 1, 10) + 
                '</span></li>').css('display', 'none');
    $npac.append(nLi);

然后我们可以用.each()遍历它们，并在它们fadeIn()时使用索引来延迟

$npac.find('li:hidden').each(function(i, obj) {
    $(obj).delay((i+1)*150).fadeIn(600);
});

See demo.

票数 1

Stack Overflow用户

发布于 2011-01-31 10:41:45

你的回调作用域在每次“点击”后都会被销毁，所以你的counter不会持久存在。

您可以将计数器声明移出脚本中的回调，它将持久化。

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/4847173

复制

相似问题

问jquery while循环在每个<li>被追加时对其进行fadeIn
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jquery while循环在每个<li>被追加时对其进行fadeInEN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jquery while循环在每个<li>被追加时对其进行fadeIn
EN