javascript - 如何将 span 元素的 HTML 设置为自定义数据属性的内容？

Question

我想显示表中行数的计数。我已经用 PHP 计算了这个并输出了<span>200 rows total</span>，但我想使用 Javascript 来切换这个<span>Showing 2 of 200 total rows</span>表是否折叠。理想情况下，我想要这样的东西：

$(".collapse-count").html('Showing 2 of ' + $(this).data("count") + ' total rows');

带标记：

<span class="collapse-count" data-count="200">Showing 2 of 200 total rows</span>

但这行不通。如何使用 jQuery 做到这一点？

score 2 · Accepted Answer

this在你的代码中没有引用.collapse-count元素，html方法接受一个函数，在这个函数的上下文中，this是指当前元素。

$(".collapse-count").html(function(index, oldHTML) {
   return 'Showing 2 of ' + $(this).data("count") + ' total rows';
});

score 2 · Accepted Answer

您需要this在适当的上下文中使用。

$(".collapse-count").html(function() {
    return 'Showing 2 of ' + $(this).data("count") + ' total rows');
});

当您将回调传递给时.html()，匹配的元素将被迭代，并将成为迭代this中当前元素的引用。

按照您的方式，您使用的是 . 的封闭值this。

score 2 · Accepted Answer

this没有您使用它的方式的元素上下文。

您可以使用html()方法的回调函数参数：

$(".collapse-count").html(function(){
    return 'Showing 2 of ' + $(this).data("count") + ' total rows';
});

score 1 · Accepted Answer

试试这个：

$(".collapse-count").html(function() {
return 'Showing 2 of ' + $(this).attr("data-count") + ' total rows';
});

score -2 · Accepted Answer

-2

与SPAN您一起工作必须使用.text()而不是.html()

于 2013-03-02T13:55:30.673 回答

5 回答 5