Prefácio

Acabei de me familiarizar com as operações básicas do DOM pela primeira vez. Com um forte interesse no DOM, eu mesmo me aprofundei nele e escrevi um pequeno caso, que pode realizar a função de adição semelhante do carrinho de compras.

Mostrar resultados

Vamos dar uma olhada no efeito primeiro. A Insira a descrição da imagem aqui
área vermelha é a nossa "área de commodities" e a parte azul abaixo é o "carrinho de compras".
Ao clicar no botão Adicionar, o produto correspondente aparecerá na área azul.

Código fonte

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 do 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);
}

Ideias

A lógica do código não é complicada para conseguir tal efeito.

Primeiro, primeiro obtemos todos os elementos do botão.
var btn1 = document.getElementsByClassName("btn1");
Em seguida, usamos o loop for para adicionar um evento de clique ao botão.
Obtenha o elemento clicado primeiro
var dom = e.target;
Em seguida, obtenha o nó irmão anterior do botão, ou seja, a etiqueta onde se encontram as informações do produto.
var predom2 = dom.previousElementSibling;
Depois de obter o produto, também precisamos obter seu tipo de rótulo, para que possamos manter a estrutura consistente ao adicioná-lo abaixo.
var predom2_n = predom2.nodeName.toLowerCase();
Gere um rótulo, correspondendo ao nome do rótulo das informações do produto. Por exemplo <a>商品1</a>, execute o código a seguir, a é um par de tags.
var a = document.createElement(predom2_n);
Em seguida, use innerHTML para obter o conteúdo do produto e fornecê-lo à tag recém-criada.
a.innerHTML = predom2.innerHTML;
Selecione <div class='cart'>o rótulo ul.
var cart_ul = document.querySelector(".cart>ul");
Crie tags li
var oLI = document.createElement("li");
Adicione o nó a oLI.
oLI.appendChild(a);
Em seguida, adicione o nó oLI a cart_ul.
cart_ul.appendChild(oLI);

Afirma-se que
este caso é apenas um exercício para iniciantes, e ainda há muitas operações que não foram implementadas para carrinhos de compras. Por exemplo, se você adicionar produtos repetidamente, será necessário adicionar um contador para contar, excluir produtos do carrinho de compras e assim por diante.

Função de adição de carrinho de compras pequeno para operação DOM

Prefácio

Mostrar resultados

Código fonte

Ideias

Acho que você gosta