Question

我正试图摆弄这个概念，我似乎无法让逻辑工作和坚持。

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

例如：

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

然后，如果他们决定增加2个联系人：

[_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开始重新计算....

Answer 1

每次“点击”后，您的回调范围都会被销毁，因此counter将不会继续存在。

您可以在脚本中的回调之外移动计数器声明，它会一直存在。

Answer 2

See working demo of the following code here.

我没有使用计数器，而是在列表增长时使用$("#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.

jquery while循环淡入每个<li>，因为它被追加</li>

2 个答案: