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” 循环点火一次

回答

相关问题