Question

我有一个包含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,3,33），而我只想要3（1,2,33）......

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

如果有可能，任何人都知道如何做到这一点？

Answer 1

这是因为.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;
});

Answer 2

为此目的，数组似乎不是一个方便的数据结构。您可能需要一个使用input元素ID的键来模拟hashmap的对象。

对于Eg。

简单

<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

Answer 3

谢谢你们，

你是最棒的。

我最终使用了两个答案的组合。我不是程序员，刚开始使用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>

再次感谢，汉斯

jquery动态创建数组

3 个答案: