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>

foreach循环中的自定义输入编号

1 个答案: