Question

这是我的HTML代码：

<!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();
        });
    }
}

我的问题是当我运行它并点击＆＃34; +＆＃34;触发click（）事件，但之后没有任何反应。

调试显示当我调用checkAddToMixClick（）函数并单击＆＃34; +＆＃34;它再次起作用，但在那之后停止工作。

任何解决方案吗？

Answer 1

只需将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>

Answer 2

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();
        });
    }
}

Answer 3

＆＃13;

var money = 10;
var inventoryNames = ["Carbon", "Hydrogen"];
var inventoryAmounts = [5, 5];
var inventoryLength = 2;

updateMoney();
populateInventory();


$(document).on("click", ".clicker", function() {  
	var id = $(this).data('id');
  inventoryAmounts[id]--;
	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>");

    }
}

＆＃13;

.clicker{}

＆＃13;

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

＆＃13;

我认为以前的答案很棒。我只想提供一种替代方案，因为您似乎可能希望逐步添加数据。

您可以使用$ .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/

jQuery的click（）内部＆＃34; for＆＃34;循环射击一次

3 个答案: