jQuery的點擊（）裏面的「for」循環點火一次

這是我的HTML代碼：jQuery的點擊（）裏面的「for」循環點火一次

<!DOCTYPE html> 
<head> 
    <title>Chemist</title> 
    <link href="stylesheet.css" rel="stylesheet"> 
</head> 
<body> 
    <h2 id="money"></h2> 
    <table border="1px" id="inventory_t"></table> 
    <script src="jquery.js"></script> 
    <script src="app.js"></script> 
</body> 
</html>

這是app.js代碼：

var money = 10; 
var inventoryNames = ["Carbon", "Hydrogen"]; 
var inventoryAmounts = [5, 5]; 
var inventoryLength = 2; 

updateMoney(); 
populateInventory(); 
checkAddToMixClick(); 

function updateMoney(){ 
    $("#money").text(money + "$"); 
} 
function populateInventory(){ 
    $("#inventory_t").empty(); 
    $("#inventory_t").append("<tr><td colspan='3'>Inventory</td></tr>") 
    for(let i = 0; i < inventoryLength; i++){ 
     $("#inventory_t").append("<tr><td style='text-align:center'>" + inventoryNames[i] + "</td><td style='text-align:center'>" + inventoryAmounts[i] + "</td><td id='add_to_mix_" + i + "'>+</td></tr>") 
    } 
} 
function checkAddToMixClick(){ 
    for(let i = 0; i < inventoryLength; i++){ 
     $("#add_to_mix_" + i).click(function(){ 
      inventoryAmounts[i]--; 
      populateInventory(); 
     }); 
    } 
}

我的問題是，當我運行這個並點擊「+」click（）事件觸發，但在此之後沒有任何反應。

調試顯示，當我調用checkAddToMixClick（）函數並單擊「+」時，它再次工作，但在此之後停止工作。

任何解決方案呢？

來源

2016-07-25 valkyrd

停止工作？無論如何，你所有的循環只能運行兩次。 – theblindprophet

那麼我怎樣才能經常檢查點擊？（我是javascript的總noob，是的） – valkyrd

只需將checkAddToMixClick();添加到您的populateInventory()函數中，並從代碼頂部移除checkAddToMixClick()。

var money = 10; 
 
var inventoryNames = ["Carbon", "Hydrogen"]; 
 
var inventoryAmounts = [5, 5]; 
 
var inventoryLength = 2; 
 

 
updateMoney(); 
 
populateInventory(); 
 

 
function updateMoney(){ 
 
    $("#money").text(money + "$"); 
 
} 
 
function populateInventory(){ 
 
    $("#inventory_t").empty(); 
 
    $("#inventory_t").append("<tr><td colspan='3'>Inventory</td></tr>") 
 
    for(let i = 0; i < inventoryLength; i++){ 
 
     $("#inventory_t").append("<tr><td style='text-align:center'>" + inventoryNames[i] + "</td><td style='text-align:center'>" + inventoryAmounts[i] + "</td><td id='add_to_mix_" + i + "'>+</td></tr>") 
 
    } 
 
    checkAddToMixClick(); 
 
} 
 
function checkAddToMixClick(){ 
 
    for(let i = 0; i < inventoryLength; i++){ 
 
     $("#add_to_mix_" + i).click(function(){ 
 
      inventoryAmounts[i]--; 
 
      populateInventory(); 
 
     }); 
 
    } 
 
}

<!DOCTYPE html> 
 
<head> 
 
    <title>Chemist</title> 
 
    <link href="stylesheet.css" rel="stylesheet"> 
 
</head> 
 
<body> 
 
    <h2 id="money"></h2> 
 
    <table border="1px" id="inventory_t"></table> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script> 
 
</body> 
 
</html>

來源

2016-07-25 17:58:36 geek1011

* facepalm *謝謝，它是如此明顯：D – valkyrd

@valkyrd謝謝 – geek1011

As you can see here您必須移動你的點擊

var money = 10; 
var inventoryNames = ["Carbon", "Hydrogen"]; 
var inventoryAmounts = [5, 5]; 
var inventoryLength = 2; 

updateMoney(); 
populateInventory(); 

function updateMoney(){ 
    $("#money").text(money + "$"); 
} 
function populateInventory(){ 
    $("#inventory_t").empty(); 
    $("#inventory_t").append("<tr><td colspan='3'>Inventory</td></tr>") 
    for(let i = 0; i < inventoryLength; i++){ 
     $("#inventory_t").append("<tr><td style='text-align:center'>" + inventoryNames[i] + "</td><td style='text-align:center'>" + inventoryAmounts[i] + "</td><td id='add_to_mix_" + i + "'>+</td></tr>"); 
     $("#add_to_mix_" + i).click(function(){ 
      inventoryAmounts[i]--; 
      populateInventory(); 
     }); 
    } 
}

來源

2016-07-25 18:00:46 Luca

var money = 10; 
 
var inventoryNames = ["Carbon", "Hydrogen"]; 
 
var inventoryAmounts = [5, 5]; 
 
var inventoryLength = 2; 
 

 
updateMoney(); 
 
populateInventory(); 
 

 

 
$(document).on("click", ".clicker", function() { 
 
\t var id = $(this).data('id'); 
 
    inventoryAmounts[id]--; 
 
\t populateInventory(); 
 
}); 
 

 
function updateMoney(){ 
 
    $("#money").text(money + "$"); 
 
} 
 
function populateInventory(){ 
 
    $("#inventory_t").empty(); 
 
    $("#inventory_t").append("<tr><td colspan='3'>Inventory</td></tr>") 
 
    for(let i = 0; i < inventoryLength; i++){ 
 
     $("#inventory_t").append("<tr><td style='text-align:center'>" + inventoryNames[i] + "</td><td style='text-align:center'>" + inventoryAmounts[i] + "</td><td class='clicker' data-id='" + i + "'>+</td></tr>"); 
 

 
    } 
 
}

.clicker{}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h2 id="money"></h2> 
 
<table border="1px" id="inventory_t"></table>

我覺得以前的答案是偉大的。我只是想提供一個替代方案，因爲看起來你可能想要增加數據。

您可以使用$ .on（）來掛鉤將來添加到DOM的任何td。這使您可以消除每個事件的連線<td id="add_to_mix"_>。所以，如果需要，您可以簡單地附加到表格而不是重新創建。

我添加了一個css類，以使代碼簡單，但你可以使用任何你想要的選擇器。我也使用了數據標籤，以避免解析id屬性。

$(document).on("click", ".clicker", function() { 
    var id = $(this).data('id'); 
    inventoryAmounts[id]--; 
    populateInventory(); 
});

http://api.jquery.com/on/

來源

2016-07-25 18:34:39 hdz

我現在就試試，謝謝。 – valkyrd

jQuery的點擊（）裏面的 「for」 循環點火一次

回答

相關問題

jQuery的點擊（）裏面的「for」循環點火一次