Question

我有一个使用twitter bootstrap的链接。

 <a href="#"><i class="icon-thumbs-up"></i></a><span class="badge">${fn:length(page.likes)}</span>

  When the user clicks on like link the value within the span should be incremented.

由于我对每个评论都有类似的按钮，我不知道如何从单个javascript执行此任务，因为我可以确定更新哪个范围。

还有一件事我喜欢这个按钮作为带有href =“＃”的超链接。所以页面跳到最顶层的eveytime我点击了类似的链接。知道如何解决这个问题。

Answer 1

对于第二个问题，您可以使用<a href="javascript:void(0)">

对于第一个问题，你的喜欢按钮在哪里？您总是可以为每个跨度分配一个唯一的ID，然后单击类似按钮，您可以使用： document.getElementById("spanUiqueId").innerHTML = parseInt(document.getElementById("spanUiqueId").innerHTML)+1;

Answer 2

对于现有的dom结构，只需选择

$('.icon-thumbs-up').parent('a').click(function() {
     var count = parseInt($('badge').text())+1;
     $('badge').text(count);
}

如果你想给一个id或类，然后用任何新的选择器替换$（'。icon-thumbs-up'）。parent（'a'）

这里要解释两件事：

第一次：parseInt确保为递增传递了数字，建议使用这种方式，因为这可能会在js中创建无提示错误，传递错误的值计数文本并破坏页面

第二：我使用+1代替++，因为++和 - 往往是不稳定的，这取决于很多东西，所以我从不使用它们或仅仅用于for循环。

Answer 3

您可以使用jQuery：

让<a>标记有一个类，例如“likeLink”：

<a class="likeLink" href="#"><i class="icon-thumbs-up"></i></a><span class="badge">${fn:length(page.likes)}</span>
<script>
$("a.likeLink").click(function() {
    $(this).next().text($(this).next().text()+1);
});
</script>

$(this).next()获取元素的下一个兄弟，在本例中为<span>。

对于你的第二个问题，你想要什么样的按钮呢？如果您只是希望它显示为链接，则可以更改链接的“href”属性：

<a href="javascript:void('0')">

这只会做什么，但保留链接。

如何增加span元素中的文本

3 个答案: