带按钮的加/减产品[关闭]答案

【问题标题】：Plus / Minus product with button [closed]带按钮的加/减产品[关闭]
【发布时间】：2019-05-27 05:20:50
【问题描述】：

我编写了一个代码来模拟“购物车”，通过使用“+”“-”按钮添加/删除产品，代码工作正常但仅适用于一个产品的问题，我希望代码适用于所有产品。

这里是代码：

const minusButton = document.querySelector('.minus-btn');
const plusButton = document.querySelector('.plus-btn');
const inputField = document.querySelector('.input-btn');

minusButton.addEventListener('click', function minusProduct() {
  const currentValue = Number(inputField.value);
  if (currentValue > 0) {
    inputField.value = currentValue - 1;
  } else currentValue = 0
});

plusButton.addEventListener('click', function plusProduct() {
  const currentValue = Number(inputField.value);
  inputField.value = currentValue + 1;
});

<!-- Product #1 -->
<div class="quantity">
  <button class="plus-btn" type="button" name="button" id="plus"><img src="plus.svg" alt="" /></button>
  <input type="text" value="0" id="input" />
  <button class="minus-btn" type="button" name="button" id="minus"><img src="minus.svg" alt="" /></button>
</div>

<!-- Product #2 -->
<div class="quantity">
  <button class="plus-btn" type="button" name="button" id="plus"><img src="plus.svg" alt="" /></button>
  <input type="text" value="0" id="input" />
  <button class="minus-btn" type="button" name="button" id="minus"><img src="minus.svg" alt="" /></button>
</div>

<!-- Product #3 -->
<div class="quantity">
  <button class="plus-btn" type="button" name="button" id="plus"><img src="plus.svg" alt="" /></button>
  <input type="text" value="0" id="input" />
  <button class="minus-btn" type="button" name="button" id="minus"><img src="minus.svg" alt="" /></button>
</div>

【问题讨论】：

代码在哪里？
sry 我现在添加了它
嗨。为什么不使用 JQuery？和你的代码（很抱歉，但是）它是一团糟......我会建议在点击时调用一个函数，并以项目 ID 作为参数，就是这样......
@AriWaisberg 为什么要使用 90 kB 库来实现无需任何外部依赖即可更好地实现？
@AriWaisberg 不，不是，而且代码也不是一团糟。它只是格式错误。

标签： javascript html dom

【解决方案1】：

您需要为每个.quantity 组执行您的代码所做的工作。

但是你的 html 中有几个错误

您尝试访问不适用于任何元素的.input-btn
您在声明 const 后尝试将 currentValue 设置为 0，而您应该尝试将输入字段设置为 0
您对每个无效的.quantity 组的按钮/输入使用相同的id。

所以

const quantities = document.querySelectorAll('.quantity');

[...quantities].forEach(function(quantity) {
  const minusButton = quantity.querySelector('.minus-btn');
  const plusButton = quantity.querySelector('.plus-btn');
  const inputField = quantity.querySelector('.input-btn');

  minusButton.addEventListener('click', function minusProduct() {
    const currentValue = Number(inputField.value);
    if (currentValue > 0) {
      inputField.value = currentValue - 1;
    } else inputField.value = 0
  });

  plusButton.addEventListener('click', function plusProduct() {
    const currentValue = Number(inputField.value);
    inputField.value = currentValue + 1;
  });

});

<!-- Product #1 -->
<div class="quantity">
  <button class="plus-btn" type="button" name="button"><img src="plus.svg" alt="" /></button>
  <input type="text" value="0" class="input-btn" />
  <button class="minus-btn" type="button" name="button"><img src="minus.svg" alt="" /></button>
</div>

<!-- Product #2 -->
<div class="quantity">
  <button class="plus-btn" type="button" name="button"><img src="plus.svg" alt="" /></button>
  <input type="text" value="0" class="input-btn" />
  <button class="minus-btn" type="button" name="button"><img src="minus.svg" alt="" /></button>
</div>

<!-- Product #3 -->
<div class="quantity">
  <button class="plus-btn" type="button" name="button"><img src="plus.svg" alt="" /></button>
  <input type="text" value="0" class="input-btn" />
  <button class="minus-btn" type="button" name="button"><img src="minus.svg" alt="" /></button>
</div>

【讨论】：

感谢您所做的出色工作和您的所有建议。
很好的解决方案，但可能值得指出的是，NodeList 不支持forEach 的浏览器。
@connexo 公平点，更新代码以使用数组。
for (const quantity of quantities) 在 IE 11 中工作，不需要 polyfill 和 Babeling。

【解决方案2】：

问题是querySelector 只返回第一个匹配项。相反，您需要所有匹配项并遍历该列表，为每个匹配项添加点击侦听器。使用querySelectorAll 查找元素，然后使用简单的for-loop 对其进行迭代：

const minusButtons = document.querySelectorAll('.minus-btn');
const plusButtons = document.querySelectorAll('.plus-btn');
const inputFields = document.querySelectorAll('.quantity input');

for (let i = 0; i < minusButtons.length; i++) {
  minusButtons[i].addEventListener('click', function minusProduct() {
    if (inputFields[i].value) {
      inputFields[i].value--;
    }
  });
}
for (let i = 0; i < minusButtons.length; i++) {
  plusButtons[i].addEventListener('click', function plusProduct() {
    inputFields[i].value++;
  });
}

.plus-btn::before {
  content: "+";
}

.minus-btn::before {
  content: "-";
}

<!-- Product #1 -->
<div class="quantity">
  <button class="plus-btn" type="button" name="button"></button>
  <input type="text" value="0" id="input" />
  <button class="minus-btn" type="button" name="button"></button>
</div>

<!-- Product #2 -->
<div class="quantity">
  <button class="plus-btn" type="button" name="button"></button>
  <input type="text" value="0" id="input" />
  <button class="minus-btn" type="button" name="button"></button>
</div>

<!-- Product #3 -->
<div class="quantity">
  <button class="plus-btn" type="button" name="button"></button>
  <input type="text" value="0" id="input" />
  <button class="minus-btn" type="button" name="button"></button>
</div>

请注意，您的代码也有无用的，更糟糕的是，重复 id 值（这在 HTML 中是不允许的）。我删除了那些。

【讨论】：

【解决方案3】：

对代码进行了一些整理，将 ID 更正为 Class，因为不能使用重复的 ID。还添加了对文档加载的侦听，以确保代码在页面准备好之前不会触发。不再使用 querySelector，因为它只获取第一个元素（可以更改回输入法）

//Cannot use querySelector, it only returns the first element
// NOTE: We have to pass in the button, this allows us to get 
// parent and limit the scope of our search.
const inputField = (button) => {
  return button.parentElement.getElementsByClassName('input')[0];
};

// use this initializer to ensure the document is ready for us
// to search and add our event listeners
document.addEventListener('DOMContentLoaded', function() {
  setUpMinusButtons();
  setUpPlusButtons();
});

// Use a common method to assign our on clicks
function setUpButtons(buttonArr, eventAction) {
  for(let i=0; i<buttonArr.length; i++) {
    buttonArr[i].addEventListener('click', eventAction);
  }
}


function setUpMinusButtons() {
  let buttons = document.getElementsByClassName('minus-btn');

  setUpButtons(buttons, 
    function minusProduct(event) {
      let button = event.target;
      let iField = inputField(button);
      const currentValue = Number(iField.value);
      if (currentValue > 0) {
        iField.value = currentValue - 1;
      } else currentValue = 0
    }); 
}

function setUpPlusButtons() {
  let buttons = document.getElementsByClassName('plus-btn');

  setUpButtons(buttons, 
   function plusProduct(event) {
      let button = event.target;
      let iField = inputField(button);
      const currentValue = Number(iField.value);
      iField.value = currentValue + 1;
    }); 
}

<!-- Product #1  CHANGED our ID to Class for buttons-->
<div class="quantity">
  <button class="plus-btn" type="button" name="button" id="plus">
                 <img src="plus.svg" alt="" />
               </button>
  <input type="text" value="0" class="input">
  <button class="minus-btn" type="button" name="button" id="minus">
                 <img src="minus.svg" alt="" />
               </button>
</div>
<!-- Product #2 -->
<div class="quantity">
  <button class="plus-btn" type="button" name="button" id="plus">
                 <img src="plus.svg" alt="" />
               </button>
  <input type="text" value="0" class="input">
  <button class="minus-btn" type="button" name="button" id="minus">
                 <img src="minus.svg" alt="" />
              </button>
</div>
<!-- Product #3 -->
<div class="quantity">
  <button class="plus-btn" type="button" name="button" id="plus">
                 <img src="plus.svg" alt="" />
               </button>
  <input type="text" value="0" class="input">
  <button class="minus-btn" type="button" name="button" id="minus">
                 <img src="minus.svg" alt="" />
               </button>
</div>

【讨论】：