同步多个值检索

Question

我在DOM中3输入ID为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 IDS d，e更多的投入。） 。在这种情况下会有更简洁的方法吗？

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

我可以建议：

1. 有一个事件处理程序和一个选择器。
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可以按照您的要求推广代码。

$(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); 
 
    } 
 
});

<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>

Answer 5

我找到上述解决方案的问题是，他们需要你这种或那种方式来跟踪的输入。这不可扩展。这里是一个解决方案，更具可扩展性（只需要你记住添加你想要包括在计算/级联输入一个类）

首先让我们来处理你的选择：

1：如果说你的投入是类型“文本”和所有在你的类型“文本”的DOM字段都在你的计算中考虑那么你的选择可能是：

$("input[type=text]") 

2：如果上述情况并非如此然后设置您想要包含在计算中的所有输入的类。然后，在已经加入类（比方说在我们的例子“my_class”）对所有的相关输入您的选择将是：

$(".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); 
} 

你W¯¯乌尔德然后调用取决于你的选择是任意两个
的这是什么功能：

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

希望我没有错过任何东西。如果我不明白你的问题，然后说，我会尽力调整我的答案