0

我是 JS 的初学者，在购物车工作。我有几个使用 ES6 模板字符串在页面中呈现的产品。到目前为止一切正常，您可以将项目添加到购物篮和购物篮并正确更新总数。我唯一遇到的问题是增加/减少按钮：它们只工作一次，如果您再次单击控制台中打印的数量保持不变。

我确实找到了其他与递增/递减函数相关的 SO 帖子，但该按钮只能工作一次，所以我认为问题与我忽略的代码中的其他内容有关。

请看下面的代码：

这是将要呈现的购物车

// select ul
const shoppingCart = document.querySelector('.cart-items');

// create a li item inside ul
let billContainer = document.createElement('li');

// attach an event listener to every  li
billContainer.classList.add('list');

// create the markup for every item added to the cart
for(let j = 0; j < basket.length; j++){

    const billMarkup =  `
                <p class="prodName">${basket[j].name}</p>
                <div class="button-wrapper">
                    <button type="button" name="increase" class="increase">+</button>
                    <span class="quantity">${basket[j].quantity}</span>
                    <button type="button" name="decrease" class="decrease">-</button>
                </div>
                <p class="totPrice">£${basket[j].price}</p>
        `;

    // add the markup to the DOM
    billContainer.innerHTML = billMarkup;
    shoppingCart.appendChild(billContainer);
}

这是增加/减少功能（按钮的事件侦听器附加到它们的父“li”）：

// attach an event listener to every li
const li = document.querySelectorAll('.list');
li.forEach( liItem => liItem.addEventListener('click', updateBill));

// add or remove items on click
function updateBill(e){
    if(e.target.nodeName === 'BUTTON'){

    // current value in the basket
    let value = parseInt(this.querySelector('.quantity').textContent);

    // if the user clicks on 'increase' button
    if(e.target.name === 'increase'){
        value++;
        console.log(value);

    // if the user clicks on 'decrease' button
    } else if(e.target.name === 'decrease'){

         value < 1 ? value = 1 : '';
         value--;
         console.log(value);
        }
    }
}

谢谢！

4

1 回答 1

1

问题

加号/减号按钮只增加/减少一次，然后就不会再进一步​​了。

解释

一旦一个值发生了变化，它只是一个浮动在控制台中的变量中的一个数字，因为这是与该值有任何关系的最后一条语句。因此，只有初始更改是成功的，但是当第二次单击按钮时，函数会返回span.quantity并获取上次单击后从未更新的值。

解决方案

解决手头问题的最简单方法是更新 的值span.quantity：

if (e.target.name === 'increase') {
    value++;
    console.log(value);
} else if (e.target.name === 'decrease') {
    value--;
    value = value < 1 ? 1 : value;
    console.log(value);
} else {
    return false;
}

this.querySelector('.quantity').textContent = value;

因为您没有提供功能性或可复制的演示，所以我没有费心对其进行测试，也没有尝试抽查您的代码。重写源代码并解决问题并可能防止将来出现问题的工作量更少。

演示亮点

Demo 使用不同的 API 来引用表单控件和替代方法和属性，这些方法和属性是更常用的方法和属性的更好版本。使用事件委托。数组方法可能有点矫枉过正，但我​​喜欢使用它们。下面是对演示的行项目引用，不幸的是 Stack Snippets 没有行号。Plunker - index.html 和 README.md可以与行号一起阅读。

HTMLFormControlsCollection

  • 52 声明<form>，

  • 53 引用所有表单控件，

  • 92-95为每个表单控件创建非常短的引用，

  • 96-99 创建对其值的引用并将其转换为数字，

  • 102-103, 109-110 简单而简短的表达，

  • 122 总价值

模板文字

  • 75-83 通过使用语义元素改进了列表项的布局。每个元素都分配有一个唯一的#id，

  • 92-94 灵活引用源自 89 和 90 的结果的#id。

数组方法

  • 90-91 通过规划一个特定的命名策略：abc-0， split('-').pop()返回一个 id 的数字结尾并split('-').shift()返回破折号之前的字母，

  • 113-120 收集所有.prc； map()返回一个总价格数组； reduce()返回总和；

事件委托/事件对象

  • 52 参考<form>,

  • 54 注册<form>点击事件。这是唯一需要的 EventListener，它将适用于它的所有子/后代，

  • 88-91, 100 使用属性引用事件的来源，Event.target不仅确定单击的元素，还确定其他元素，如兄弟姐妹、父母/祖先和孩子/后代。

各种各样的

  • 56-71 看起来basket是一个对象数组？在OP中没有看到它，所以我不得不猜测。删除了该basket[j].quantity属性，因为每个项目最初的数量为 1 更有意义。

  • 84服用insertAdjacentHTML()类innerHTML固醇。

普朗克

演示

<!DOCTYPE html>
<html>

<head>
  <style>
    html,
    body {
      font: 400 16px/1.1 Consolas;
    }
    
    legend {
      font-size: 1.3rem;
    }
    
    output,
    input {
      display: inline-block;
      text-align: center;
    }
    
    [id^=qty] {
      width: 1.5ch;
    }
    
    [id^=prc] {
      min-width: 9ch;
    }
    
    [id^=prc]::before {
      content: "= £";
    }
    
    [id^=bas]::before {
      content: " x  £";
    }
    
    #cart+label {
      display: inline-block;
      margin: 10px 0 0 40%;
    }
    
    #total::before {
      content: " £";
    }
  </style>
</head>

<body>
  <form id='cart'></form>
  <label>Total:
    <output id='total' form='cart'>0.00</output>
  </label>
  <script>
    var cart = document.forms.cart;
    var x = cart.elements;
    cart.addEventListener('click', updateBill, false);

    var basket = [{
      name: "thing0",
      price: 1.99
    }, {
      name: "thing1",
      price: 12.99
    }, {
      name: "thing2",
      price: 21.59
    }, {
      name: "thing3",
      price: 0.09
    }, {
      name: "thing4",
      price: 5.99
    }];

    for (let j = 0; j < basket.length; j++) {
      var details = `
      <fieldset id="item-${j}">
        <legend>${basket[j].name}</legend>
        <button id="inc-${j}" type="button">+</button>
        <output id="qty-${j}">1</output>
        <button id="dec-${j}" type="button">-</button>
        <output id="bas-${j}">${basket[j].price}</output>
        <output id="prc-${j}" class="prc">${basket[j].price}</output>
    </fieldset>
    `;
      cart.insertAdjacentHTML('beforeend', details);
    }

    function updateBill(e) {
      if (e.target.type === 'button') {
        var ID = e.target.parentElement.id;
        var idx = ID.split('-').pop();
        var dir = e.target.id.split('-').shift();
        var qty = x.namedItem(`qty-${idx}`);
        var bas = x.namedItem(`bas-${idx}`);
        var prc = x.namedItem(`prc-${idx}`);
        var sum = x.total;
        var quantity = parseInt(qty.value, 10);
        var base = parseFloat(bas.value).toFixed(2);
        var price = parseFloat(prc.value).toFixed(2);
        var total = parseFloat(sum.value).toFixed(2);
        if (dir === "inc") {
          quantity++;
          qty.value = quantity;
          prc.value = quantity * base;
        } else {
          quantity--;
          if (quantity <= 0) {
            quantity = 1;
          }
          qty.value = quantity;
          prc.value = quantity * base;
        }
      }
      var prices = Array.from(document.querySelectorAll('.prc'));

      var numbers = prices.map(function(dig, idx) {
        return parseFloat(dig.value);
      });
      var grandTotal = numbers.reduce(function(acc, cur) {
        return acc + cur;
      }, 0);

      x.total.value = grandTotal.toFixed(2);
    }
  </script>
</body>

</html>

于 2018-04-29T20:49:42.717 回答