foreach 循环中的自定义输入数字

Question

我为我的输入号码制作了一种新样式，效果很好。 我的问题是当我添加这是一个不起作用的 foreach 结构时。 我认为问题在于 ID 更改了值，但在 foreach 中所有输入都具有相同的 ID。

这是我在 foreach 中的代码：

    <div class='value-button' id='decrease' onclick='decreaseValue()' value='Decrease Value'>-</div>
                <input size='1' id='number' name='product[<?= $p->id ?>]' value='<?= $p->qty ?>' />
<div class='value-button' id='increase' onclick='increaseValue() 'value='Increase Value'>+</div>

这是js代码：

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

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

我尝试提供唯一的 ID，但不起作用。如果我添加 <?= $p->id ?> 而不是 id number 这不起作用。

我该怎么办？ 如果需要，我还可以更改输入的 html。

谢谢

这是我的最后一次测试：

<td class="qty">
      <div class="value-button" id="decrease" onclick="decreaseValue()" value="Decrease Value">-</div>
        <input size="1" id="92" name="product[92]" value="3">
      <div class="value-button" id="increase" onclick="increaseValue() " value="Increase Value">+</div>
      <script>
      function increaseValue() {
        var value = parseInt(document.getElementById('92').value);
        value = isNaN(value) ? 0 : value;
        value++;
        document.getElementById('92').value = value;
      }

      function decreaseValue() {
        var value = parseInt(document.getElementById('92').value);
        value = isNaN(value) ? 0 : value;
        value < 1 ? value = 1 : '';
        value--;
        document.getElementById('92').value = value;
      }
      </script>
    </td>

我尝试在 foreach 中添加 js，输入的 id 相同。但不起作用。

Answer 1

您可以使用输入的 id 作为调用 increaseValue 和 decreaseValue 的参数。 id 属性应该是唯一的，您可以使用适当的前缀和产品编号/标识符。

也许您将属性的引用更改为"，而不是'（这可能是给定样式指南的问题）。如果你这样做了，那么就始终保持相同的风格。您可以通过在 javascript 参数中使用其他未使用的引号来嵌套引号。

onclick="decreaseValue('product[<?= $p->id ?>]')"
        ^                                       ^  outer
                       ^                      ^    inner

function increaseValue(id) {
    var value = +document.getElementById(id).value || 0;
    value++;
    document.getElementById(id).value = value;
}

function decreaseValue(id) {
    var value = +document.getElementById(id).value || 0;
    value--;
    if (value < 1) {
        value = '';
    }
    document.getElementById(id).value = value;
}

<div class="value-button" onclick="decreaseValue('product[<?= $p->id ?>]')">-</div>
<input size="1" id="product[<?= $p->id ?>]" name="product[<?= $p->id ?>]" value="" />
<div class="value-button" onclick="increaseValue('product[<?= $p->id ?>]')">+</div>