0
私はこのプロジェクトを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)
}
フルバージョン：ここでhttps://codepen.io/benasl/pen/ZXJYgz