javascript 更新下一个/上一个输入字段值

Question

我有一个表格，每条记录都有一个输入字段，其两侧都有一个减号和加号按钮。 我试图得到它，以便当用户单击加号按钮时，它会将输入字段的值增加一，反之亦然。

我为 JavaScript 生成表记录：

  + "<td class=\"text-center\">"
  +   "<span class=\"btn-icon btn-icon-primary\"value=\"" + b.id +  "\" onclick=\"updateCard(this)\" data-type=\"minus\" data-card-type=\"nonfoil\"><img class=\"icon\" src=\"/static/img/icons/minus.png\"></span>"
  +   "<input type=\"number\" class=\"page-input-inventory\" maxlength=\"5\" autocomplete=\"off\" tabindex=\"1\" value=\"" + b.n2 + "\">"
  +   "<span class=\"btn-icon btn-icon-primary\"value=\"" + b.id +  "\" onclick=\"updateCard(this)\" data-type=\"plus\" data-card-type=\"nonfoil\"><img class=\"icon\" src=\"/static/img/icons/plus.png\"></span>"
  + "</td>"

更新卡：

function updateCard(e) {
  if (e.getAttribute('data-type') == 'minus'){
    var value = parseInt($(this).next().value);
    value = isNaN(value) ? 0 : value;
    value--;
    if (value < 0) value = 0;
    $(this).next().value = value;
  } else if (e.getAttribute('data-type') == 'plus'){
    var value = parseInt($(this).previous().value);
    value = isNaN(value) ? 0 : value;
    value++;
    $(this).previous().value = value;
  }
};

我在控制台中不断收到以下错误：

Uncaught TypeError: $(...).previous is not a function
    at updateCard (inventory.js:42)
    at HTMLSpanElement.onclick ((index):1)

桌子：

Answer 1

你犯了一些错误：

1. 您应该使用e而不是this 。 this是指 jquery object。

2. 这是val不是value 。

3. val()是一种方法而不是一种属性。

这有效：

function updateCard(e) {
  if (e.getAttribute('data-type') == 'minus'){
    var value = parseInt($(e).next().val());
    value = isNaN(value) ? 0 : value;
    value--;
    if (value < 0) value = 0;
    $(e).next().val(value);
  } else if (e.getAttribute('data-type') == 'plus'){
    var value = parseInt($(e).prev().val());
    value = isNaN(value) ? 0 : value;
    value++;
    $(e).prev().val(value);
  }
};

最后。 你可以省略parseInt 。 输入已经是number类型。