Question

我在DOM中有3个输入，标识为a，b和c - 包含数字 - 以及javascript函数：

function func(a,b,c)
{
    console.log(a+b+c);
}

我想通过获取其他两个func输入中的任何一个3输入来调用<script> function func(a,b,c) { console.log(a+b+c)); } $(function(){ $('#a').on('change', function(){ func(this.value, $('#b').val(), $('#c').val()) }); $('#b').on('change', function(){ func($('#a').val(), this.value, $('#c').val()) }); $('#c').on('change', function(){ func($('#a').val(), $('#b').val(), this.value) }); }); </script>。目前，我正在这样做：

但是这个appraoch似乎并不优雅，特别是如果有很多输入（我们可以想象有2或3个输入带有id e，SELECT TO_DATE(TO_CHAR(date_column,'MM/DD/YYYY'), 'YYYY-MM-DD') FROM table; ..）。在这种情况下会有更简洁的方法吗？

Answer 1

你可以用这样的CSS类做一些简单的事情：

$('.myInputs').on('change', function() {
    var a = $('#a').val();
    var b = $('#b').val();
    var c = $('#c').val();
    func(a, b, c);
});

但不要忘记将课程添加到您的输入

Answer 2

我可以建议：

拥有一个事件处理程序和一个选择器。
将值数组传递给函数。

function func(vals) {
  console.log(vals.reduce(function(a, b) {
    return a + b;
  }, 0));
}

$(function() {

  var $els = $('#a, #b, #c'); // better to use a common class
  $els.on('change', function() {
    var vals = [];
    $.each($els, function(_, item) {
      vals.push(parseInt(item.value, 10));
    });
    func(vals);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="a">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<select id="b">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<select id="c">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

Answer 3

您可以为每个输入设置类似的类，并按$.each

计算它的数量

<script>
    $(function () {
        $('.calculate').on('change', function () {
            var result = "";
            $.each($('.calculate'), function () {
                result += $(this).val();
            });
            console.log(result);
        });
    });
</script>

<input type="text" name="a" id="a" class="calculate" />
<input type="text" name="b" id="b" class="calculate" />
<input type="text" name="c" id="c" class="calculate" />
<input type="text" name="d" id="d" class="calculate" />

Answer 4

通过向所需文本字段提供类似/唯一class并使用$.each，您可以根据需要对代码进行概括。

＆＃13;

$(document).ready(function(){
  
  $('.mynumberfield').on('change', function(){
    func();
  });
  
  function func()
  {
    var total = 0;
    $('.mynumberfield').each(function(){
      var currVal = $(this).val();

      if($.trim(currVal).length>0 && !isNaN(currVal))
      {
        
        currVal = parseFloat(currVal);
        total +=currVal;
      }
    });
    $("#total").text(total);
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
a<input type=text class="mynumberfield" id="a" />
b<input type=text class="mynumberfield" id="b" />
c<input type=text class="mynumberfield" id="c" />
d<input type=text class="mynumberfield" id="d" />
e<input type=text class="mynumberfield" id="e" />
f<input type=text class="mynumberfield" id="f" />
g<input type=text class="mynumberfield" id="g" />

Total:<p id="total"></p>

＆＃13;

Answer 5

我在上述解决方案中发现的问题是，他们需要您以某种方式跟踪输入。这不可扩展。这是一个更具可扩展性的解决方案（只需要记住在计算/连接中包含的输入上添加一个类）

首先让我们处理您的选择器：

1：如果说您的输入类型为＆＃34; text＆＃34;您的DOM中所有类型的字段＆＃34; text＆＃34;在你的计算中要考虑你的选择器可以是：

$("input[type=text]")

2：如果不是上述情况，则在计算中包含的所有输入上设置一个类。然后在所有相关输入中添加了课程（让我们说＆＃34; my_class＆＃34;对于我们的示例），您的选择器将是：

$(".my_class")

现在我们让选择器让我们处理这个功能：

function func($selector)
{
    var allValues = "";

    $selector.each(function(){
        allValues += $(this).value();
    })

    console.log(allValues);
}

如果你没有连接字符串值但是添加数字，那么：

function func($selector)
{
    var allValues = 0;

    $selector.each(function(){
        var value = $(this).value().trim();
        allValues += ($(this).value().length>0 && !isNaN(value)) ? parseInt(value) : 0;
    })

    console.log(allValues);
}

然后，您可以根据选择器的任何一个来调用此函数：

func($("input[type=text]"));
//OR
func($(".my_class"))

希望我没有错过任何东西。如果我不能很好地理解你的问题那么说，我会相应地调整我的答案

在jquery中同步多个值检索

5 个答案: