每隔格必須增加其櫃檯

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

每隔格必須增加其櫃檯

回答

相關問題