JS：建立從多個ID的

值的和我有這樣的HTML + JS：JS：建立從多個ID的

<input type="text" id="first" value="" /> 
<input type="text" id="second" value="" /> 
<input type="text" id="third" value="" /> 

<b id="result"></b> 

<script> 
$(document).ready(function() { 
var $range = $("#first"), $result = $("#result"); 

var track = function() { 
    var $this = $(this), value = $this.prop("value"); 
    $result.html("Value: " + value); 
}; 

$range.on("change", track); 
}); 
</script>

這得到它的元素中立即一系列滑塊id爲「第一」和輸出的瞬時值「的結果」。工作正常。

但是現在我想輸出所有id的「第一個」，「第二個」，「第三個」等的總和。

如何在此代碼中執行此操作？

來源

2017-10-11 PhilG

你能否提供'＃first'，'＃result'等的相關HTML？ –

帶有「第一個」ID的項目缺少準確性 – Dominik

提供[mcve]和預期結果 – charlietfl

首先，您可能會更容易將CSS類分配給您想爲其中的值進行求和的所有範圍字段。這將允許您使用單個選擇器在DOM中查找它們。

但是你需要做的就是找到所有的範圍元素，循環遍歷它們，在你走的時候總結它們的值。然後將結果分配給你的div。

$(function() { 
 
    var $range = $('#first, #second, #third'); 
 
    var $result = $('#result'); 
 

 
    function track(event) { 
 
     var total = 0; 
 

 
     $range.each(function (i, element) { 
 
      total += parseInt($(element).val(), 10); 
 
     }); 
 

 
     $result.html('Value: ' + total); 
 
    } 
 

 
    $range.on('change', track); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input id="first" type="range" min="0" max="10" value="1"> 
 
<input id="second" type="range" min="0" max="10" value="2"> 
 
<input id="third" type="range" min="0" max="10" value="3"> 
 

 
<div id="result"></div>

我假設你使用的整數值。如果不是，則需要使用parseInt刪除整數鑄造。

來源

2017-10-11 23:33:05 fubar

我用parseFloat，因爲這些值有逗號。 – PhilG

使用.on()連接三次事件偵聽器，就像您爲第一個事件完成的一樣。然後，而不是做$this.prop你會想要實際抓住每一個人。

$(document).ready(function() { 
var $first = $("#first"), $second = $("#second"), $third = $("#third"), $result = $("#result"); 

var track = function() { 
    var value = $first.prop("value") + $second.prop("value") + $third.prop("value"); 
    $result.html("Value: " + value); 
}; 

$first.on("change", track); 
$second.on("change", track); 
$third.on("change", track); 
});

來源

2017-10-11 23:31:41 Max

對不起，我的問題還不夠清楚。我想有一個所有的ID不是多個的總和。 – PhilG

選擇所有元素並使用.reduce()。

$(document).ready(function() { 
 
    const result = $("#result"); 
 

 
    const range = $("#first,#second,#third") 
 
     .on("change", function() { 
 
     result.html("Value: " + 
 
      range.toArray().reduce((sum, el) => sum + +el.value, 0)); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="first" value="1" /> 
 
<input type="text" id="second" value="2" /> 
 
<input type="text" id="third" value="3" /> 
 

 
<b id="result"></b>

分配公共類會比通過ID選擇更好，但是這取決於你。

來源

2017-10-11 23:35:13 llama

我會用$.fn.extend()：

// external.js 
 
$(function(){ 
 
$.fn.extend({ 
 
    valSum: function(){ 
 
    var c = 0; 
 
    this.each(function(){ 
 
     c += +$(this).val(); 
 
    }); 
 
    return c; 
 
    } 
 
}); 
 
$('#frm').submit(function(e){ 
 
    e.preventDefault(); 
 
}); 
 
// I would give them all a class instead - but 
 
var sum = $('.sum'); 
 
sum.change(function(){ 
 
    $('#output').html(sum.valSum()); 
 
}); 
 
});

/* external.css */ 
 
html,body{ 
 
    padding:0; margin:0; 
 
} 
 
.main{ 
 
    width:940px; padding:20px; margin:0 auto; 
 
}

<!DOCTYPE html> 
 
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'> 
 
    <head> 
 
    <meta http-equiv='content-type' content='text/html;charset=utf-8' /> 
 
    <meta name='viewport' content='width=device-width' /> 
 
    <title>.valSum()</title> 
 
    <link type='text/css' rel='stylesheet' href='css/external.css' /> 
 
    <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script> 
 
    <script type='text/javascript' src='external.js'></script> 
 
    </head> 
 
    <body> 
 
    <div class='main'> 
 
     <form id='frm' name='frm'> 
 
     <label for='first'>First</label> 
 
     <input id='first' name='first' class='sum' type='text' /> 
 
     <label for='second'>Second</label> 
 
     <input id='second' name='second' class='sum' type='text' /> 
 
     <label for='third'>Third</label> 
 
     <input id='third' name='third' class='sum' type='text' /> 
 
     </form> 
 
     <div id='output'></div> 
 
    </div> 
 
    </body> 
 
</html>

.valSum()應該在任何選擇現在的工作，與輸入反正。所以，

var fst = $('#first, #second, #third'); 
fst.change(function(){ 
    $('#output').html(fst.valSum()); 
});

也應該在不添加HTML類的情況下工作。

由於這是更可重用的，它應該是你如何編碼。

來源

2017-10-11 23:39:59 PHPglue

對編輯感到抱歉。花了我一段時間來充分測試。 – PHPglue

JS：建立從多個ID的

回答

相關問題