javascript無法正常工作

Question

頁面上的JavaScript需要在onpage負載上工作。所以我嘗試將文檔就緒函數添加到代碼中。它似乎沒有工作。

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做什麼。