0
그래서 나는이 프로젝트를 codepen에서하고 있습니다. Javascript는 버튼 클릭 후 버튼의 부모 요소에서 product-name
클래스의 항목을 가져 와서 cart-dropdown
에 넣습니다. 그러나 동일한 작업을 수행하는 더 간단한 방법이 있는지 궁금합니다. 그리고 난 cart-dropdown
에 product-price
을 배치하는 데 어려움을 겪고 있습니다. 가격을 넣을 수는 있지만, 따로 넣을 수는 있습니다. <li>
. 여기에 자바 스크립트가 있습니다.한 div에서 다른 div로 정보를 전송하는 간단한 방법
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)
}
전체 버전 : 여기 https://codepen.io/benasl/pen/ZXJYgz