Question

我有这个脚本在keyup上生成50个'a'标签：

$("#searchbox").live("keyup",function(){
    var count = 50;
    var aElements = "";

    for (var i = 0; i < count; i++) {
        aElements += "<a href=\"#\">" + i + "</a>";
    }

    $("#page").append(aElements);
});

问题是每个keyup上的广告数量。因此，不是针对特定数量的50个触发事件，而是将代码广告计算在内。所以对于每个'keyup'，我得到50 + 50 + 50'a'标签，依此类推。因此，当我输入'stackoverflow'时，我得到650'一个'标签:)而不是50.那我该怎么做呢？请记住，这个数字实际上是一个var，它每次都会改变，因此添加事件.one（）将不起作用。

Answer 1

不要使用.append()，正如其名称所示，它会添加新元素，但不会删除以前的元素。在#page末尾添加一个容器并使用.html()，以便删除旧内容。

Answer 2

我不是100％确定我了解您的要求，但我相信这正是您所需要的：

选项1

$("#page").html(""); //Clear HTML from #page

选项2

$("#page a").remove(); //Clear only the anchor tags from #page

选项3

只需将.append()替换为.html()即可。除非您有特定原因要使用.append()，否则这是最佳选择。

$("#page").html(aElements);

这是a working fiddle。

Answer 3

如果我理解正确，每次数字都会改变（可能更大或更小），您需要更新它以使a标签的数量等于该数字。

我认为最好的选择是看看已经有多少存在并采取相应行动（除非总数保持很小，在这种情况下，只需擦除它们并每次重新创建）。为此，我将为每个a标记添加一个共享类：

aElements += "<a href=\"#\" class=\"number\">" + i + "</a>";

然后执行以下操作以查看已存在的数量：

var existing = $(".number").length

然后，如果数字少于我想要的数量：

for (var i = existing; i < count; i++) {
    // add more

如果更多，请执行以下操作以删除多余的内容：

$(".number").gt(count).remove();

关键字'刷新'Jquery事件

3 个答案: