javascript - javascript 无法加载

Question

页面上的 javascript 需要在页面加载时工作。所以我尝试将文档准备功能添加到代码中。它似乎不起作用。

http://janeucreative.com/daddychallenge/bag.html

<script>$(document).ready(function() {


  function addItem(item) {
        var itemInCart = item.cloneNode(true);
        itemInCart.onclick = function() { removeItem(this); };

        var cart = document.getElementById("cart");
        cart.appendChild(itemInCart);
    }

    function removeItem(item) {
        var itemInItems = item.cloneNode(true);
        itemInItems.onclick = function() { addItem(this); };

        var cart = document.getElementById("cart");
        cart.removeChild(item);
    }
  init();
});</script>

任何建议将不胜感激！我对 javascript 很陌生，只是想一步一步地学习它。

Answer 1

首先，您需要让您的页面使用更现代的 jquery 版本：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js" ></script>

然后，在链接你正确完成的 jquery 之后，你可以像这样重写你的代码：

<script>
function init(toAdd, toRemove){
 addItem(toAdd);
 removeItem(toRemove);
}
function addItem(item) {
        var itemInCart = item.cloneNode(true);
        itemInCart.on("click",function(){removeItem(this);});    
        $("#cart").appendChild(itemInCart);
}
function removeItem(item) {
        var itemInItems = item.cloneNode(true);
        itemInItems.on("click", function(){addItem(this);});    
        $("#cart").removeChild(item);
}
init($("#myAddedItem"), $("myRemovedItem"));
</script>

这样，您的函数 addItem 和 removeItem 将在页面的其他位置可用。您目前似乎将它们设置为只运行一次，从页面初始化开始。

我不确定你在用 cloneNode 做什么。