JQuery 更新标签

Question

我的页面上有 2 个文本框和一个标签。 2 个文本框将包含数值。标签文本将是 2 个文本框值的乘积。有没有办法使用 JQuery 来做到这一点，以便在我编辑文本框时可以更新值而无需进行回发？

文本框也可能包含带有逗号的值：例如10,000。有没有办法可以从中提取数字，以便用于计算标签值。

提前致谢，

电击

Answer 1

我还不能将 cmets 添加到其他答案中，所以我将在此处发布更新。

最初的问题涉及乘积，即乘法，所以这里有一个版本，允许无限的文本框并完成乘法。

function makeInt(text) {
  return parseInt(text.replace(',', ''));
}
$(function(){
  //hook all textboxes (could also filter by css class, if desired)
  //this function will be called whenever one of the textboxes changes
  //you could change this to listen for a button click, etc.
  $("input[type=text]").change(function(){
    var product = 1;
    //loop across all the textboxes, multiplying along the way
    $("input[type=text]").each(function() {
      product *= makeInt($(this).val());
    });
    $("#display-control-id").html(product);
  });
});

Answer 2

$('#SecondTextbox').keyup(function() {
   var t1 = $('#FirstTexbox').val();
   var t2 = $(this).val();
   var result = t1+t2;
   $('#resultLabel').html(result);
});

这可以解决问题，或者您可以在带有一些链接元素的点击事件中使用它。这也不会有任何页面刷新。

$('#checkButton').click(function() {
   var t1 = $('#FirstTexbox').val();
   var t2 = $('#SecondTextbox').val();
   var result = t1+t2;
   $('#resultLabel').html(result);
});

链接可能是这样的，

<a id="checkButton" title="Check your result">Check</a>

这样你就有了'cursor:pointer;'的css设置让它看起来是一个正确的链接。