个人中心
gpt4 book ai didi

JavaScript 增加按钮仅增加一次

转载 作者：行者123 更新时间：2023-12-03 01:59:48 25 4
gpt4 key购买 nike

我是 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);
        }
    }
}

谢谢!

最佳答案

问题

加/减按钮仅增加/减少一次，然后就不会再继续。

说明

一旦值发生更改，它只是浮​​动在控制台中的变量中的一个数字，因为这是与该值有关的最后一条语句。因此只有初始更改成功，但是当第二次单击按钮时，功能返回到 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;

因为您没有提供功能性的演示，也没有提供可复制的演示，所以我没有费心去测试它，也没有尝试抽查您的代码。重写源代码并解决问题并可能防止将来出现问题会花费更少的精力。

演示亮点

该演示使用不同的 API 来引用表单控件以及替代方法和属性，这些方法和属性是更常用的方法和属性的更好版本。使用事件委托(delegate)。数组方法可能有点过分了，但我喜欢使用它们。下面是对演示的行项目引用，遗憾的是堆栈片段没有行号。 Plunker - index.html and README.md可以与行号一起读取。

HTMLFormControlsCollection

<小时/>

  • 52 声明 <form> ,

  • 53 引用所有表单控件，

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

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

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

  • 总值(value) 122

Template Literals

<小时/>

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

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

数组方法

<小时/>

Event Delegation/Event Object

<小时/>

  • 52 引用 <form> ,

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

  • 88-91, 100 事件引用来源 Event.target属性，不仅确定单击的元素，还确定其他元素，例如 sibling 、 parent /祖先和 child /后代。

其他

<小时/>

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

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

<小时/>

Plunker

演示

<!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>

关于JavaScript 增加按钮仅增加一次，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50086238/

25 4 0
文章推荐： javascript - 如何捕获 "file selected"事件？
文章推荐： javascript - Laravel 搜索时获取关系数据
文章推荐： javascript - 在我的网站上显示脚本的值
文章推荐： javascript - 在 React Native 中使用 prop 启动计时器
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com