【发布时间】：2018-03-12 10:43:49
【问题描述】：
所以我在 codepen 上做这个项目。 Javascript做了它应该做的事情（点击后，从按钮的父元素中获取一个类为product-name的项目并将其放在cart-dropdown中），但是我想知道是否可能有更简单的方法来做同样的事情事物。而且我很难将product-price 放在cart-dropdown 上，我的意思是我可以把价格放进去，但是在一个单独的<li> 中。这是javascript。
var itemsCart = document.getElementById('cart-drop');
function myFunc(){
itemsCart.classList.toggle('show');
}
window.onclick = function(event) {
if(!event.target.matches('.dropdown span') &&
!event.target.matches('.dropdown-toggle')){
var hide = document.getElementsByClassName('cart-dropdown');
if(hide[0].classList.contains('show')){
hide[0].classList.remove('show');
}
}
}
function addToCardButtons(){
var addToCart = document.getElementsByClassName('add-to-cart');
for(var i = 0; i<addToCart.length; i++) {
addToCart[i].addEventListener('click', function(){
var parentNode = this.parentNode;
findName(parentNode);
var num = document.getElementById('number');
var parsed = parseInt(num.innerHTML);
if(parsed>=0){
parsed++;
num.classList.add('addedToCart');
num.innerHTML = parsed;
}
})
}
}
addToCardButtons();
function findName(parent){
var children = parent.childNodes;
for(var i = 0; i<children.length; i++){
var child = children[i].classList;
if(child && child.contains('product-name')){
var productName = children[i].innerHTML;
createItem(productName);
}
}
}
function createItem(name) {
var li = document.createElement('li');
li.appendChild(document.createTextNode(name))
itemsCart.append(li)
}
【问题讨论】：
标签： javascript css cart shopping