Question

我有一个输入框，周围有加减按钮。您可以在输入框中手动输入数字，也可以按加或减按钮来增加或减少数字

HTML

 <button type="button" class="btn btn-info changeValue" onclick="decreaseValue()">-</button>
    <input type="number" class="form-control" name="quantity" id="addSub" value="0" placeholder="Quantity" required>
    <button type="button" class="btn btn-info changeValue" onclick="increaseValue()">+</button>

JavaScript

function increaseValue() {
    var value = parseInt(document.getElementById('addSub').value, 10);
    value = isNaN(value) ? 0 : value;
    value++;
    document.getElementById('addSub').value = value;
  }

  function decreaseValue() {
    var value = parseInt(document.getElementById('addSub').value, 10);
    value = isNaN(value) ? 0 : value;
    value < 1 ? value = 1 : '';
    value--;
    document.getElementById('addSub').value = value;
  }

现在，我有按钮可以动态生成此输入框。可以生成多个输入框。但是，输入框中的所有添加和子按钮将以原始输入框为目标。有没有一种方法可以使添加按钮和子按钮始终以它旁边的输入框为目标？

Answer 1

单击按钮时，请检查其textContent以查看相关输入是在其左侧还是右侧，然后选择目标（单击元素）的previousElementSibling或nextElementSibling：

document.addEventListener('click', ({ target }) => {
  if (!target.matches('button')) {
    return;
  }
  const doAdd = target.textContent === '+';
  const input = doAdd ? target.previousElementSibling : target.nextElementSibling;
  input.value = Number(input.value) + (doAdd ? 1 : -1);
});

<button>-</button>
<input type="number" value="0">
<button>+</button>

<button>-</button>
<input type="number" value="0">
<button>+</button>

Answer 2

您要做的是为您的输入提供唯一的ID，以便您可以将其输入到按钮中以增加或减少值

在HTML中动态创建的元素上运行函数

2 个答案: