Question

我有这段代码：

$(document).ready( function(){
    var gold;
    var silver;
    var copper;

    $("#gold").change(function(){
        gold = $(this).val();
    });
    $("#silver").change(function(){
        silver = $(this).val();
    });
    $("#copper").change(function(){
        copper = $(this).val();
    });
});

只要文本字段发生变化，它就会更新变量，这就是html：

<input type="text" id="gold">
<input type="text" id="silver">
<input type="text" id="copper">

如果我必须声明如下：

$("#copper").change(function(){
    copper = $(this).val();
});

对于我得到的每个变量，当我有超过100个变量时，我该怎么办？我想避免在他们的活动中逐一获得元素......

我尝试过这样的事情：

var gold = dynamicValue("gold");

function dynamicValue(element){
    $("#" + element).change(function(){
        return $(this).val();
    });
}

但似乎没有用......

Answer 1

如果您的结构总是如此，我会推荐这样的东西。

var values = {};

$('input').change(function(){
   values[this.id] = this.value;
});

像这样，它将创建一个对象，其ID为键，输入值为键值。

values = {
   gold: 'something',
   copper: 'something',
   silver: 'comething'
}

你可以随时获得

var gold = values.gold;

如果您获得undefined，则意味着输入尚未更改。以下示例

＆＃13;

var values = {};

$('input').change(function() {
  values[this.id] = this.value;
  $('div').text(JSON.stringify(values)); // this line is only for the example
});

＆＃13;

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<input type="text" id="gold">
<input type="text" id="silver">
<input type="text" id="copper">
<input type="text" id="gold1">
<input type="text" id="silver2">
<input type="text" id="copper4">

<div></div>

＆＃13;

Answer 2

<强> HTML

<input type="text" class="metal-input" id="gold">
<input type="text" class="metal-input" id="silver">
<input type="text" class="metal-input" id="copper">

<强>的jQuery

var metals = {};

$('.metal-input').on('input', function() {

    metals[this.id] = $(this).val();
    console.log(metals);
});

Answer 3

使用类并将id用作键

$(document).ready( function(){
  var metals = 
      { gold : null, silver : null, copper : null}

  $(".inputs").change(function(){
    metals[this.id] = $(this).val();
    console.log(metals);
  });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label for="gold">gold</label><input type="text" id="gold" class="inputs">
<label for="silver">silver</label><input type="text" id="silver" class="inputs">
<label for="copper">copper</label><input type="text" id="copper" class="inputs">

jQuery与事件相关的函数的公共因子

3 个答案: