Prefacio

Acabo de familiarizarme con las operaciones básicas del DOM por primera vez. Con un gran interés en el DOM, profundicé en él y escribí un pequeño caso, que puede realizar la función de adición similar del carrito de compras.

Mostrar resultados

Primero echemos un vistazo al efecto. El Inserte la descripción de la imagen aquí
área roja es nuestra "área de productos" y la parte azul a continuación es el "carrito de compras".
Cuando hacemos clic en el botón Agregar, el producto correspondiente aparecerá en el área azul.

Código fuente

parte html

<body>
    <div class="commotity">
      <ul>
        <li>
          <a id="1">商品1</a>
          <button class="btn1">添加</button>
        </li>
        <li>
          <span id="2">商品2</span>
          <button class="btn1">添加</button>
        </li>
        <li>
          <span id="3">商品3</span>
          <button class="btn1">添加</button>
        </li>
      </ul>
    </div>
    <div class="cart">
      <ul></ul>
    </div>
  </body>

parte css

* {
    
    
    margin: 0;
    padding: 0;
}

.commotity {
    
    
    background-color: brown;
    width: 100%;
    height: 400px;
}

ul,
li {
    
    
    text-decoration: none;
    text-align: center;
}

.cart {
    
    
    background-color: cyan;
    height: calc(100vh - 400px);
    width: 100%;
}

parte del código js

window.onload = function() {
    
    
  var idarr = [];
  var btn1 = document.getElementsByClassName("btn1");
  
  for (var i = 0; i < btn1.length; i++) {
    
    
    btn1[i].onclick = function (e) {
    
    
      var e = e || window.event; //兼容ie
      // console.log(e.target)
      var dom = e.target; //获取被点击的元素
      //去找到要操作的结点
      var predom2 = dom.previousElementSibling;
      var predom2_n = predom2.nodeName.toLowerCase();
      var a = document.createElement(predom2_n);
      a.innerHTML = predom2.innerHTML;
      var cart_ul = document.querySelector(".cart>ul");
      var oLI = document.createElement("li");
      oLI.appendChild(a);
      cart_ul.appendChild(oLI);
}

Ideas

La lógica del código no es complicada para lograr tal efecto.

Primero, primero obtenemos todos los elementos del botón.
var btn1 = document.getElementsByClassName("btn1");
Luego usamos el bucle for para agregar un evento de clic al botón.
Obtenga el elemento en el que se hizo clic primero
var dom = e.target;
Luego obtenga el nodo hermano anterior del botón, es decir, la etiqueta donde se encuentra la información del producto.
var predom2 = dom.previousElementSibling;
Después de obtener el producto, también necesitamos obtener su tipo de etiqueta, para que podamos mantener la estructura consistente cuando lo agreguemos a continuación.
var predom2_n = predom2.nodeName.toLowerCase();
Genere una etiqueta, correspondiente al nombre de la etiqueta de la información del producto. Por ejemplo <a>商品1</a>, ejecute el siguiente código, a es un par de etiquetas.
var a = document.createElement(predom2_n);
Luego use innerHTML para obtener el contenido del producto y asígnelo a la etiqueta que acaba de crear.
a.innerHTML = predom2.innerHTML;
Seleccione <div class='cart'>la etiqueta ul.
var cart_ul = document.querySelector(".cart>ul");
Crear etiquetas li
var oLI = document.createElement("li");
Agregue el nodo a oLI.
oLI.appendChild(a);
Luego agregue el nodo oLI a cart_ul.
cart_ul.appendChild(oLI);

Se afirma que
este caso es solo un ejercicio para principiantes, y todavía hay muchas operaciones que no se han implementado para los carritos de compras. Por ejemplo, si agrega productos repetidamente, debe agregar un contador para contar, eliminar productos del carrito de compras, etc.

Función de adición de carrito de compras de caja pequeña de operación DOM

Prefacio

Mostrar resultados

Código fuente

Ideas

Supongo que te gusta