Question

我正在通过构建一个基本的水果购物页面来学习JavaScript，在该页面中，可以单击显示在屏幕顶部的水果并将其添加到屏幕底部的“购物车”中。将水果放入购物车后，点击图片应将其从购物车中删除。

即使代码基本相同，单击添加图像也可以，但是单击删除图像则不能。

使用调试器和一些console.logs，我已经确定click事件是问题所在，而不是与之关联的功能。

我尝试更改html选择器以查看是否是问题所在，以及更改document.ready语句中功能的顺序。

$(document).ready(function() {
    renderInventory();
    addFruitOnClick();
    removeFruitOnClick();
    render();
});

此代码可将水果添加到购物车中

function addFruitOnClick () {
    $("#inventory img").on("click", function(event) {
        OWNED_FRUIT.push(event.target.id);
        render();
    })
}

此代码无法从购物车中取出水果：

function removeFruitOnClick () {
    $("#cart img").on("click", function(event) {
        OWNED_FRUIT.splice(parseInt(event.target.id, 10), 1);
        render();
    })
}

以下是相关的html：

<body>
        <div id="inventory"></div>

        <div id="cart"></div>

    <script src="index.js">

    </script>
    </body>

jQuery on click事件在一个实例中起作用，而在另一个实例中不起作用

0 个答案: