Question

我是javascript的新手。我已根据文本框ID编写了代码更改，但我需要将代码格式化为函数调用，有一个函数是否可以为不同的文本框返回不同的值？

HTML：

<input type="text" name="a" id="1"  />
<input type="text" name="b" id="2"  />
<input type="text" name="result1" id="result1" />

<input type="text" name="c" id="3"  />
<input type="text" name="d" id="4"  />
<input type="text" name="result2"  id="result2"/>

JavaScript的：

$(document).ready(function(){
    $("#result1").change(function(){
        var a = document.getElementById("a").value;
        var b = document.getElementById("b").value;
        document.getElementById("result1").value = (a+b); 
    });
    $("#result2").change(function(){
        var c = document.getElementById("c").value;
        var d = document.getElementById("d").value;
        document.getElementById("result2").value = (c+d);
    });
});

Answer 1

您可以使用＆＃34;以＆＃34;开头JQuery选择器如下所示。

这里将触发id的所有输入文本的更改事件，以result开头...即。适用于result1，result2 ......等等。

并且它将在它之前取两个文本框的值...并将总和分配给结果框。

$(document).ready(function(){
$("[id^='result']").change(function(){
  var value1 = $(this).before().val();
  var value2 = $(this).before().before().val();
    $(this).val(value1+value2);
});
});

但是如果你关注相关的id或类，那么你可以很容易地做到这一点，虽然你正在改变html元素的位置。

考虑以下代码，其中指定了与结果tex框相关的特定ID：

<input type="text" name="a" id="first_1"  />
<input type="text" name="b" id="second_1"  />
<input type="text" name="result1" id="result_1" class="result" />

<input type="text" name="c" id="first_2"  />
<input type="text" name="d" id="second_2"  />
<input type="text" name="result2"  id="result_2" class="result"/>

和相关的JQuery将是：

$(document).ready(function(){
$("[id^='result']").change(function(){
  var suffixValue = $(this).attr('id');
  suffixValue = suffixValue.split('_')[1];

  var value1 = $("#first_"+suffixValue).val();
  var value2 = $("#second_"+suffixValue).val();

  $(this).val(value1+value2);
});
});

请查看JQuery Start with selector

Answer 2

<强> HTML

<input type="text" name="a" id="1"  />
<input type="text" name="b" id="2"  />
<input type="text" name="result1" id="result1" class="result" />

<input type="text" name="c" id="3"  />
<input type="text" name="d" id="4"  />
<input type="text" name="result2"  id="result2" class="result"/>

<强> Jquery的

$('.result').blur(function(){
var result;
    if($(this).attr("id")=="result1")
    {
        result=parseInt($('#1').val())+parseInt($('#2').val());
       $(this).val(result);

    }
    else if($(this).attr("id")=="result2")
    {
        result=parseInt($('#3').val())+parseInt($('#4').val());
      $(this).val(result);
    }
});

http://jsfiddle.net/CjLWp/

Answer 3

我不确定你为什么要听结果框的更改事件。它应绑定到值框。

如果你想让一个函数完成所有操作，你可以将一个类名设置为所有值框，然后听取它的更改事件。

<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){
$(".num-box").change(function(){
    if ($(this).hasClass('type1')) {
        var a = $("[name=a]").val();
        var b = $("[name=b]").val();
        $("[name=result1]").val(parseInt(a)+parseInt(b));
    } else if ($(this).hasClass('type2')) {
        var c = $("[name=c]").val();
        var d = $("[name=d]").val();
        $("[name=result2]").val(parseInt(c)+parseInt(d));
    }
});
});
</script>
</head>
<body>
<input type="text" name="a" class="num-box type1" value=0 />
<input type="text" name="b" class="num-box type1" value=0 />
<input type="text" name="result1" />
<input type="text" name="c" class="num-box type2" value=0 />
<input type="text" name="d" class="num-box type2" value=0 />
<input type="text" name="result2" />
</body>
</html>

Answer 4

我认为统一功能应该是 -

$("#result1, #result2").change(function(){
var a = document.getElementById(this.id + "-a").value;
var b = document.getElementById(this.id + "-b").value;
this.value = (a + b); 
});

this是上下文。在事件侦听器函数中，上下文是触发事件的元素，因此当result1触发事件时，this将成为result1元素。

关于a和b - 您在此处混淆了name和id值。如果这两个元素的ID是随机的，那么你可以做任何稳定的事情（如果元素的顺序有所改变，你的代码可能会失败），除非使用两个不同的函数。我的建议是给他们正确的上下文ID，而不是1或a，而是result1-a和result2-a等等。然后你可以添加this的ID，一切都应该有效。

一般提示 - ID应以字母开头，而不是数字，因为CSS（3）中的数字不匹配。

对于$("#result1, #result2")部分，如BhushanKawadkar建议的那样，它可以更改为$("[id^=\"result\"")，然后您不必指定每个ID。

Answer 5

你考虑过jQuery吗？然后，您可以通过（例如）同一个类选择元素。所以，如果我是你，我会做这样的事情

<textarea class="textbox">ABC</textarea>
<textarea class="textbox">DFC</textarea>

然后javascript：

$(document).on("change",".textbox",function()
               {
                  alert($(this).val()); 

               });

此处的工作示例：http://jsfiddle.net/k4Y29/ 然后在更改任何内容后 - 它将返回其值。

PS。这可以用于任何领域：输入，选择等.jQuery意味着乐趣;）。

一个函数返回多个文本框的结果

5 个答案: