如何在JavaScript中为不同的Id使用相同的功能?

时间:2017-10-25 08:03:50

标签: javascript

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中执行此操作。

2 个答案:

答案 0 :(得分:6)

您可以使用id作为参数来调用函数。在内部取值并将其转换为数字,如果为假,则$tags->count()将零值作为值。

&#13;
&#13;
NaN
&#13;
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;
}
&#13;
&#13;
&#13;

以对象作为存储输入免费版本。

&#13;
&#13;
<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>
&#13;
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 = {};
&#13;
&#13;
&#13;

答案 1 :(得分:0)

id name中传递function like add('book') or add('pen'),这用于javascript中的函数调用

并在txtNumber

中使用book代替java script

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

function sub(id) {
  var txtNumber = document.getElementById(id);
  var newNumber = parseInt(txtNumber.value) - 1;
  txtNumber.value = newNumber;
}
<div class="range">
  <label>Book</label>
  <a href="#" onClick="sub('book')">subtract</a><input type="text" id="book" value="0" min="0"><a href="#" onClick="add('book')"> Add</a>
</div>

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