将信息从一个 div 传输到另一个的更简单方法

Question

所以我在 codepen 上做这个项目。 Javascript 做了它应该做的事情（点击后，从按钮的父元素中取出一个 class 为 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

Answer 1

这是简化的代码。希望这可以帮助。我通过传递 price 参数将 product price 添加到 cart-dropdown。

window.onload = function () {
 window.onclick = function (event) {
  if (!event.target.matches('.dropdown span') && !event.target.matches('.dropdown-toggle'))
   document.querySelector('.cart-dropdown').classList.remove('show');
 }

 function addToCardButtons() {
  var addToCart = document.querySelectorAll('.add-to-cart');

  for (var i = 0; i < addToCart.length; i++) {
   addToCart[i].addEventListener('click', function () {
    createItem(this.parentNode.querySelector(".product-name").innerHTML,
         this.parentNode.querySelector(".product-price").innerHTML);

    var num = document.querySelector('#number');
    var parsed = parseInt(num.innerHTML);

    if (parsed >= 0) {
     num.classList.add('addedToCart');
     num.innerHTML = ++parsed;
    }
   })
  }
 }

 addToCardButtons();

 function createItem(name, price) {
  var li = document.createElement('li');
  li.appendChild(document.createTextNode(name + " - " + price))
  document.querySelector('#cart-drop').append(li);
  //Remove "Your cart is empty" when any product is added
  [].filter.call(document.querySelectorAll('#cart-drop > li'),function(x) {
   if (x.textContent.indexOf('Your cart is empty') > -1) x.remove();
  });
 }
}

#main {
 margin-top: 20px;
 margin-bottom: 20px;
}

#main .row {
 margin-top: 20px;
 margin-bottom: 20px;
}

.text {
 position: absolute;
 top: 50%;
 transform: translate(0%, -50%);
 text-align: right;
 text-transform: uppercase;
 color: #fff;
 width: 60%;
}

.text h1 {
 font-size: 4em;
 color: #d88c00;
}

.product-wrap {
 margin-top: 30px;
}

.product-name {
 margin-top: 0;
 color: #ffa500;
}

.product-type {
 margin: 0;
 color: #bbbbbb;
}

.product-price {
 font-weight: 600;
 font-size: 1.5em;
 color: #424242;
}

.price-old {
 color: #bbbbbb;
 text-decoration: line-through;
 font-size: 1em;
 line-height: 20px;
}

.product-description {
 margin-bottom: 20px;
 margin-top: 20px;
}

.test {
 width: 100%;
 min-height: 350px;
}

.test img {
 width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />

<nav class="navbar navbar-default navbar-fixed-top custom-nav no-border">
 <div class="container">
  <div class="navbar-header">
   <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"
    aria-controls="navbar">
   <span class="sr-only">Toggle navigation</span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
    </button>
   <a class="navbar-brand no-padding" href="#">
   <img class="logo" src="imgs/logo.svg">  
    </a>
  </div>

  <div id="navbar" class="collapse navbar-collapse">
   <ul class="nav navbar-nav navbar-right">
    <li class="dropdown" id="dropdown" onclick="document.getElementById('cart-drop').classList.toggle('show');">
     <a class="dropdown-toggle custom-toggle no-padding" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
     <span class="cart"><i class="fa fa-shopping-cart" aria-hidden="true"></i></span>
     <span>Your cart:</span>
     <span id="number"> 0</span> 
    </a>
     <ul id="cart-drop" class="dropdown-menu cart-dropdown">
      <li>Your cart is empty</li>
     </ul>
    </li>
   </ul>
  </div>
 </div>
</nav>

<div id="main">
 <div class="container">
  <div class="row">
   <div class="col-md-5">
    <div class="test">
     <img src="https://images.unsplash.com/photo-1484795819573-86ae049cb815?dpr=1&auto=compress,format&fit=crop&w=1500&h=&q=80&cs=tinysrgb&crop=">
    </div>
   </div>

   <div class="col-md-7">
    <div class="product-wrap">
     <h4 class="product-type">Mountain Bikes</h4>
     <h1 class="product-name">Lorem ipsum</h1>
     <span class="product-price price-new">1200.00 eu </span><span class="price-old">1680.00 eu</span>
     <p class="product-description">Curabitur maximus quam sit amet mattis vulputate. Donec id tristique nisl, ut vehicula urna. Vivamus
      vel magna ipsum. Vestibulum et finibus nisl. </p>
     <button class="btn btn-lg add-to-cart">Add to cart</button>
    </div>
   </div>
  </div>

  <div class="row">
   <div class="col-md-7">
    <div class="product-wrap">
     <h4 class="product-type">Road Bikes</h4>
     <h1 class="product-name">Lorem ipsum #2</h1>
     <span class="product-price price-new">2000.00 eu</span>
     <p class="product-description">Curabitur maximus quam sit amet mattis vulputate. Donec id tristique nisl, ut vehicula urna. Vivamus
      vel magna ipsum. Vestibulum et finibus nisl. </p>
     <button class="btn btn-lg add-to-cart">Add to cart</button>
    </div>
   </div>

   <div class="col-md-5">
    <div class="test">
     <img src="https://images.unsplash.com/photo-1484795819573-86ae049cb815?dpr=1&auto=compress,format&fit=crop&w=1500&h=&q=80&cs=tinysrgb&crop=">
    </div>
   </div>

  </div>
 </div>
</div>

将信息从一个 div 传输到另一个的更简单方法

Simpler way of transfering info from one div to another

javascript

css

shopping

cart