2

我想要实现的是使用 .length 计算列表项的数量，我可以在文档上准备好这个工作，但我无法让数字动态更新。

我有一个按钮，可以在单击时将 li 添加到列表中（收藏夹），我想做的是在发生这种情况时获取 li 更新的数量，这是代码；

$(document).ready(function () {

  var n = $(".left-5 li").length; // count number of li's
  $(".spandex").text("There are " + n + " li's."); //output number in .spandex

     //this is the part I can't get to work
    $("#refreshme").click(function () { //when refreshme is clicked update number of li's in .spandex 
   $(".spandex").text("There are " + n + " li's.");
  });


});

<div id="refreshme">
    <div id="favbutton-2" class="widget FavButton"> 
        <div class="btn btn-mini">

            <span class='wpfp-span'>
                <a class='wpfp-link' href='?wpfpaction=add&amp;postid=724' title='' rel='nofollow'>
                    <span class="addfav"></span>

                </a>
            </span> 
        </div>

    </div>              
</div>

也许问题出在这个结构上？我尝试通过单击 .addfav 来调用该函数，但仍然没有骰子。

当单击#refreshme 时，我尝试更新该函数以完全执行其他操作，在这种情况下，等待 500 毫秒，然后单击 .latest，它不起作用。

$(document).ready(function () {

    var n = $(".left-5 li").length; // count number of li's
    $(".spandex").text("There are " + n + " li's."); //output number in .spandex


    $("#refreshme").click(function () { 

      setTimeout(function () {
            $('.latest').click();
        }, 500); 

        /*
        n = $(".left-5 li").length;
        $(".spandex").text("There are " + n + " li's.");
        */

    });
});

我尝试在单击 wpfp-link 而不是 #refreshme 和 .add fav 时运行该功能，这似乎“有点”，它会触发我选择的任何内容，但它不会更新 .length 参数，所以我改变了它，所以 .length 在点击 .center 时更新（因为它在点击#refreshme 时拒绝更新），通过了一个 setTimeout 并且有效。非常hacky。

只需更新答案，以便遇到它的其他任何人都可以使用。

$(document).ready(function () {

    var n = $(".left-5 li").length; // count number of li's
    $(".spandex").text("There are " + n + " li's."); //output number in .spandex


    $(".wpfp-link, .addfav, .removefav").click(function () { 

      setTimeout(function () {
            $('.center').click();
             n = $(".left-5 li").length;
             $(".spandex").text("There are " + n + " li's.");
        }, 500); 





    });
});
4

3 回答 3

3

如果您使用的是支持 的浏览器getElementsByClassName()，并且您愿意为li元素添加类名，则可以简单地使用：

var listItems = document.getElementsByClassName('listItem');
$('#refreshme').click(function(){
    $('.spandex').text('There are ' + listItems.length);
});

简单，概念验证，演示。

这利用了document.getElementsByClassName()返回活动 nodeList 的事实（因此随着更多与给定类名匹配的元素添加到文档中，它被添加到文档中）。

当然，您可以通过将上述内容与以下内容结合来缩小范围document.getElementById()：

var listItems = document.getElementById('one').getElementsByClassName('listItem');
$('#refreshme').click(function(){
    $('.spandex').text('There are ' + listItems.length);
});

简单，概念验证，演示。

参考：

于 2013-06-16T09:58:36.120 回答
2

你需要计算长度，点击这样的刷新，

$(document).ready(function () {
    var n = $(".left-5 li").length; // count number of li's
    $(".spandex").text("There are " + n + " li's."); //output number in .spandex

    //this is the part I can't get to work
    $("#refreshme").click(function () { //when refreshme is clicked update number of li's in .spandex 
        n = $(".left-5 li").length; // count number of li's
        $(".spandex").text("There are " + n + " li's.");
    });
});
于 2013-06-16T09:48:54.560 回答
0

正如其他人提到的，您需要n根据需要重新计算。但是您还应该结合重复的代码以使其更简单：

function showCount() {
    var n = $(".left-5 li").length;
    $(".spandex").text("There are " + n + " li's.");
}

$(document).ready(function () {
    showCount();
    $("#refreshme").click( showCount );
});
于 2013-06-16T10:06:34.867 回答