試圖爲特定圖像類型追加圖像計數| jQuery的

Question

我想這個功能打印球圖片的數量或消防車的圖片在用戶點擊數：

function imageCounter(){ 

var ballCount = 0; 
var truckCount = 0; 

$('img[src*=ball]').each(function(){ 
    if($(this).prop("checked")){ 
     ballCount+=1; 
    }  
    $('#radioButtons').append("There are " + ballCount + " ball images."); 
}); 


$('img[src*=truck]').each(function(){ 
    if($(this).prop("checked")){ 
     truckCount+=1; 
    } 
    $('#radioButtons').append("There are " + truckCount + " truck images."); 
    }); 

} 

我覺得我接近..

我有4個球圖像，和1輛救火車圖像。我的代碼目前不給我圖像的數字值，而是打印輸出消息4次的球，1次的消防員。

有關從哪裏出發的建議？

Answer 1

你只需要追加消息行搬出foreach循環的：

function imageCounter() { 

    var ballCount = 0; 
    var truckCount = 0; 

    $('img[src*=ball]').each(function() { 
    if ($(this).prop("checked")) { 
     ballCount += 1; 
    } 
    }); 

    $('#radioButtons').append("There are " + ballCount + " ball images."); 

    $('img[src*=truck]').each(function() { 
    if ($(this).prop("checked")) { 
     truckCount += 1; 
    } 
    }); 
    $('#radioButtons').append("There are " + truckCount + " truck images."); 
} 

Answer 2

我注意到有兩件事情。首先，$(this).prop("checked")將在<img>標記上調用，除非您將它們設置爲在其他地方未在此處顯示的代碼中進行檢查，否則它們不會被檢查。 （意爲truckCount和ballCount不增加）

第二個是事實$('#radioButtons').append(...)是被稱爲你的每一個「循環」中這麼說，因此將追加該行對每個<img>標記，選擇相匹配。