Question

我有三个div。每个div必须在点击它们时增加其计数器值。

HTML：

<body>
    <content>
        <div id="box1" class="v1" onclick="counter('box1')";>A : <span class="num">0</span></div>
        <div id="box2" class="v2" onclick="counter('box2')">B: <span class="num">0</span></div>
        <div id="box3" class="v3" onclick="counter('box3')">C: <span class="num">0</span></div>
    </content>
</body>

使用Javascript：

  function counter(id){
     var id = document.getElementById(id);
     $('#id').click(function () {
          update($("span"));
     });
  }

  function update(j) {
     var n = parseInt(j.text(), 10);
     j.text(n + 1);
  }

以下是代码demo

Answer 1

你正在做很多jQuery为你做的工作。如果您将课程更改为box并使用ID来设置内容的样式，则可以执行以下操作：

<body>
    <content>
        <div id="box1" class="box">A: <span class="num">0</span></div>
        <div id="box2" class="box">B: <span class="num">0</span></div>
        <div id="box3" class="box">C: <span class="num">0</span></div>
    </content>
</body>

$( function() {
    $('.box').click( function() {
        var num = $(this).find('.num');
        num.text( parseInt(num.text()) + 1 );
    });       
});

示例：http://jsfiddle.net/ddvQU/1/

一些想法：

如果样式对于单个元素（现在和将来）是唯一的，那么您应该使用ID。多个元素共有（或将要）共有的样式应使用类。
使用内联javascript onclick='blah()'更难以管理，因为它不容易调试，不允许代码重用，并且当您更改代码时强制您在许多地方进行更新。它还会让你做出令人讨厌的事情，例如转义引号。
var id = document.getElementById(id);＆lt; =我们拥有jQuery的全部原因是我们不必这样做。只需$('#'+id)即可。（好吧，也许不是全部原因，而是其中之一）。
如果将jQuery处理程序附加到元素类（参见第一个项目符号），则无需执行上述操作。处理程序已经具有对该对象的引用，即使它甚至没有ID。
我会使用.on()代替.click()，但是当你想成为jQuery的新手时，首先让它工作，然后研究为什么on()更好，以及如何做到。

Answer 2

为你的div分配一个点击功能：

$('#div_id').html(parseInt($('#div_id').html())++)

或类似的东西。

Answer 3

http://jsfiddle.net/4eqve/32/

使用闭包为每个DIV存储计数器变量。
附加点击处理程序。

Answer 4

将counter功能更改为：

function counter(id){
   update( $('#'+id+">span") );
}

Answer 5

http://jsfiddle.net/4eqve/24/

demo将每个计数存储在数据中。一个可以帮助你的大事是将一个公共类应用于你想要绑定处理程序的元素，正如你将在这个演示中看到的添加了类“box”

Answer 6

如果您正在使用jQuery，那么您也可以使用它提供的click处理程序。您的实现非常接近，但您需要确保引用正确的元素。我对其进行了更改，以便您将box div传递给更新函数，然后从span元素中选择正确的div。

// jQuery onclick for the boxes
$('#box1, #box2, #box3').click(function() {
   update(this);
});

function update(j) {
    var span = $(j).children('span');
    var n = parseInt(span.text())+1;
    span.text(n);
}

这是jsFiddle：http://jsfiddle.net/4eqve/29/

Answer 7

修正了你。

当你有干净的html，并且分离javascript来完成工作时，它会更清晰。

<body>
    <content>
        <div id="box1" class="count-div">A : <span class="num">0</span></div>
        <div id="box2" class="count-div">B: <span class="num">0</span></div>
        <div id="box3" class="count-div">C: <span class="num">0</span></div>
    </content>
</body>

$(function(){
    $(".count-div").click(function(){
        amount = 1;
        value = parseInt($(this).find("span").html());
        $(this).find("span").html(value+amount);                
    });
});

您甚至可以清理它，以便减少代码。如果您有任何问题请问我

http://jsfiddle.net/4eqve/33/

Answer 8

您的脚本中存在许多错误。更不用说，标记选择非常模糊。

通过稍微更新一些加价，我们可以使用一小段代码来完成此操作。

$(".clicable").click(function() {
    $(this).children("span").html(parseInt($(this).children("span").html()) + 1);
});

检查demo此处

每个div必须在点击时递增其计数器

8 个答案: