jquery动态创建数组

jquery create array dynamically

本文关键字：数组 创建 动态 jquery      更新时间：2024-04-18

我有一个包含3个输入字段的页面。在这些字段中，我想得到最大值。我想实现的是，用户可以填写一个字段，该字段的值被动态添加到数组中，如果该值大于其他两个输入字段的值，则该值也会显示在文本字段中。我希望能够在没有onBlur（）函数的情况下完成这项工作（如果可能的话）。尝试使用keyup函数，但这将继续向数组中添加数字，其中只有3个数字可用。。

这就是我目前所拥有的：

$(document).ready(function() {
  $('#a').keyup(function() {
    var x = $('#a').val();
    hs.push(x);
  });
  $('#b').keyup(function() {
    var y = $('#b').val();
    hs.push(y);
  });
  $('#c').keyup(function() {
    var z = $('#c').val();
    hs.push(z);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<input id="a" type="text" />
<input id="b" type="text" />
<input id="c" type="text" />

如果我在a中输入1，在b中输入2，在c中输入3，然后改变主意，将c从3改为33，我的数组中现在有4个数字（1，2，33），而我只想要3（1，23）。。。

我猜keyup函数不是这里的方法，但我希望尽可能保持它的动态性，而不会强迫用户改变任何输入的焦点来获得结果。

如果可能的话，有人知道怎么做吗？

这是因为.push()附加到数组。您将希望更改某个索引处的项目。在您的情况下，hs[0]、hs[1]和hs[2]将被更改，而不是push。因此，您可以使用hs = [null, null, null]并适当地更改值。使用数组不是最好的方法，您可能希望使用具有3个属性a、b和c的对象。以下是如何做到这一点：

  var hs = {
      'a': null,
      'b': null,
      'c': null
  };

然后只需设置元素hs.a或hs.b或hs.c:

$('#a').keyup(function() {
  var x = $('#a').val();
  hs.a = x;
});
$('#b').keyup(function() {
  var y = $('#b').val();
  hs.b = y;
});
$('#c').keyup(function() {
  var z = $('#c').val();
  hs.c = z;
});

数组似乎不是一个方便的数据结构。您可能需要一个对象来模拟带有input元素id的键的hashmap。

例如

简单

<input id="a" type="text" />
<input id="b" type="text" />
<input id="c" type="text" />
var hs = {};
$(document).ready(function () {
    $('input').keyup(function () {
        hs[this.id] = $(this).val();
    });
});

FIDDLE

谢谢大家，

你是最棒的。

我最后使用了两个答案的组合。我不是程序员，刚开始使用Jquery，所以我的解决方案可能不是最好的，但它对我有效。。。。这就是最终结果：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
var hs= {
    'a': null,
    'b': null,
    'c': null,
};
$(document).ready(function() {
  $('input').keyup(function() {
    hs[this.id] = $(this).val();
    var x = hs["a"];
    var y = hs["b"];
    var z = hs["c"];
    $("#d").val(Math.max(x,y,z));
  });
});
</script>
</head>
<body>
  <input id="a" type="text"/>
  <input id="b" type="text"/>
  <input id="c" type="text"/><br><br>
  <input id="d" type="text"/>
</body>
</html>

再次感谢，Hans

相关文章：