每隔格必须增加其柜台

我有三个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

来源

2012-03-05 Priya

你需要更具体的关于您遇到的问题位。发布链接到小提琴是伟大的，但没有更多的信息，你基本上要求人们“请调试这个任何错误”。这个问题会在当前状态下迅速关闭 – JaredPar 2012-03-05 19:43:36

你做了很多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/

的几点思考：

如果风格是u唯一的元素（现在和未来），你应该使用ID。对于多个元素来说（或将要）通用的样式应该使用类。
使用inline javascript onclick='blah()'更难以管理，因为它不容易调试，不允许重用代码，并且在更改代码时迫使您在很多地方进行更新。它也会让你做一些讨厌的事情，比如逃避引号。
var id = document.getElementById(id); < =我们有jQuery的全部原因是，我们不必这样做。只需做$('#'+id)。（好吧，也许不是全部的原因，但其中之一）。
如果您将jQuery处理程序附加到您的元素类（请参阅第一个项目符号），则不需要执行上述操作。该处理程序已经具有对该对象的引用，即使它甚至没有ID。
我会用.on()代替.click()，但你看起来是新的jQuery的，得到这个工作第一，然后看看为什么on()比较好，以及如何做到这一点。

来源

2012-03-05 19:58:26

指定点击功能，以您的div作用：

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

或沿着这些线。

来源

2012-03-05 19:43:26 kand

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

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

来源

2012-03-05 19:49:53

清除容器中的html ..这有什么用？并抛出错误 – charlietfl 2012-03-05 19:55:11

你想象中的错误 – 2012-03-05 19:58:19

不在萤火虫我不是...计数器是未定义的......你可以改变小提琴 – charlietfl 2012-03-05 19:59:22

变化counter功能如下：

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

来源

2012-03-05 19:51:18 Engineer

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

演示存储在数据中的每一计数。这将帮助你一件大事是将共有类要绑定的处理程序过于您将在本演示中添加了类“盒子”

来源

2012-03-05 19:51:57 charlietfl

看到如果你使用jQuery，那么你可能为元素以及使用它提供的click处理程序。你的实现非常接近，但你需要确保你引用了正确的元素。我改变了它，以便您将box div传递到更新函数，然后从该div元素中选择正确的span。

// 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/

来源

2012-03-05 19:56:09 Jivings

修正了你。

，当你有干净的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/

来源

2012-03-05 19:57:20 Nealv

脚本中有很多错误。更不用说了，标记选择非常模糊。

随着一些标记的更新，我们可以用一小段代码来做到这一点。

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

检查demo这里

来源

2012-03-05 19:59:59 Starx

每隔格必须增加其柜台

回答

相关问题