javascript - 如何在 JavaScript 中对不同的 ID 使用相同的函数？

Question

function add() {
  var txtNumber = document.getElementById("book");
  var newNumber = parseInt(book.value) + 1;
  book.value = newNumber;
}

function sub() {
  var txtNumber = document.getElementById("book");
  var newNumber = parseInt(book.value) - 1;
  book.value = newNumber;
}

<div class="range">
  <label>Book</label>
  <a href="#" onClick="sub()">subtract</a><input type="text" id="book" value="0" min="0"><a href="#" onClick="add()"> Add</a>
</div>

<div class="range">
  <label>Pen</label>
  <a href="#" onClick="sub()">subtract</a><input type="text" id="pen" value="0" min="0"><a href="#" onClick="add()"> Add</a>
</div>

如何为不同的 Id 使用相同的功能？

我尝试使用“this”关键字来选择当前 ID，但它没有用... 我正在尝试仅在 javascript 而不是 jquery 中执行此操作。

Answer 1

您可以使用 id 作为调用函数的参数。在内部取值并将其转换为数字，如果为假，如 NaN 取零作为值。

function add(id) {
    var element = document.getElementById(id),
        value = +element.value || 0;

    element.value = value + 1;
}

function sub(id) {
    var element = document.getElementById(id),
        value = +element.value || 0;

    value--;
    if (value < 0) {
        value = 0;
    }
    element.value = value;
}

<div class="range">
  <label>Book</label>
  <a href="#" onClick="sub('book')"><i class="fa fa-minus-circle" aria-hidden="true">-</i></a><input type="text" id="book" value="0" min="0">
  <a href="#" onClick="add('book')"><i class="fa fa-plus-circle" aria-hidden="true">+</i></a>
</div>

<div class="range">
  <label>Pen</label>
  <a href="#" onClick="sub('pen')"><i class="fa fa-minus-circle" aria-hidden="true">-</i></a><input type="text" id="pen" value="0" min="0">
  <a href="#" onClick="add('pen')"> <i class="fa fa-plus-circle" aria-hidden="true">+</i></a>
</div>

输入一个对象作为存储的免费版本。

function add(id) {
    storage[id] = storage[id] || 0;
    document.getElementById(id).innerHTML = ++storage[id];
}

function sub(id) {
    storage[id] = storage[id] || 0;
    --storage[id];
    if (storage[id] < 0) {
        storage[id] = 0;
    }
    document.getElementById(id).innerHTML = storage[id];
}

var storage = {};

<label>Book</label> <a href="#" onClick="sub('book')">-</a> <span id="book">0</span> <a href="#" onClick="add('book')">+</a><br>
<label>Pen</label> <a href="#" onClick="sub('pen')">-</a> <span id="pen">0</span> <a href="#" onClick="add('pen')">+</i></a>