在添加具有整数值的 div 元素时需要帮助答案

【问题标题】：Need Help in adding div elements which have integer values在添加具有整数值的 div 元素时需要帮助
【发布时间】：2015-03-03 09:52:02
【问题描述】：

我有三个 DIV，其内容是整数值，并且经常从另一个来源更新。我的主要想法是将三个 div 的内容解析为 float 或 integer ，将它们相加并在另一个 div 中显示总数。我期待使用 onchange() 函数处理 div 中的内容，因为其中的内容会经常更改。以下是我的代码，它目前无法正常工作，如果您能帮我解决这个问题，我将不胜感激。此 div 中的内容将使用文本输入经常更新，您可以创建一个文本输入输出来操作第一个 div，然后显示整个总和提前致谢。

<script>
    function total() {
  var value1 = parseFloat($('#div1').innerHTML ()) || 0;
  var value2 = parseFloat($('#div2').innerHTML ()) || 0;
  var value3 = parseFloat($('#div1').innerHTML ()) || 0;
  var total;
 total=value1 + value2 + value3;
  $('#total').html(total);
}
  </script>

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

</head>
<body >
  <div id="mywraper">
      <div id="div1" onchange="total()">
	    4
      </div>
      <div id="div2"  onchange="total()">
	    5
      </div>
	  <div id="div2" onchange="total()">
	    6
      </div>
</div>
 <div id="total_div">
    Total $<span id="total"></span>
  </div>
</body>
</html>

【问题讨论】：

jQuery 的对象没有方法.innerHTML()。请改用.html()。
或使用.text() - 函数
另外，你有重复的ID，它不会工作......类似的问题在这里解释：stackoverflow.com/questions/6676186/use-onchange-in-a-div
首先 onChange 不能与 Pete 提到的 div 一起使用。而是从您真正更改 div 值的地方调用总函数。并使用 .text() 作为@empiric 或 .html() 提及
是的，onChange 需要用户输入来检测更改，因此您应该将总函数粘贴到任何更新值的函数中。无论如何，you could do something more dynamic, like this this ||| This is the same as the prior example, I just removed all the comments and optional lines ||| Here I just added more divs 表明如果 div 的数量发生变化，您不必更改 javascript ...

标签： javascript jquery html

【解决方案1】：

使用这个html()

<script>
    function total() {
  var value1 = parseFloat($('#div1').html()) || 0;
  var value2 = parseFloat($('#div2').html()) || 0;
  var value3 = parseFloat($('#div1').html()) || 0;
  var total;
 total=value1 + value2 + value3;
  $('#total').html(total);
}
  </script>

【讨论】：

【解决方案2】：

试试这个：

 function total() {
    // fetch text using 'text' method and then convert string into number using '+' operator
    var value1 = +$('#div1').text() || 0;
    var value2 = +$('#div1').text() || 0;
    var value3 = +$('#div1').text() || 0;
    var total = value1 + value2 + value3;
    $('#total').html(total);
}

http://jsfiddle.net/uxajjk1b/2/

【讨论】：

【解决方案3】：

使用text() 代替innerHTML，如下所示：

<script>
    function total() {
      var value1 = parseFloat($('#div1').text()) || 0;
      var value2 = parseFloat($('#div2').text()) || 0;
      var value3 = parseFloat($('#div1').text()) || 0;
      var total;
      total=value1 + value2 + value3;
      $('#total').html(total);
    }
</script>

【讨论】：

请扩展您的答案，展示它如何以及为什么解决了问题提出的问题 - 这将在未来对其他人有所帮助，并且您更有可能得到点赞！

【解决方案4】：

我真的不想回答，因为这可能很难解决，因为我们一开始不知道值是如何更新的。然而，我最终做了一个相对广泛的例子，所以我们在这里。

如前所述，onChange 需要用户输入或操作来检测任何更改。这意味着您的total() 只会在页面加载时触发一次（假设它位于</body> 之前）。

最好的方法是将total() 粘贴在更改 html 元素内部值的原始函数中。这样total()每次也会被触发。

我忍不住让total() 更具活力。这样，如果您添加或删除这些子 div，则无需更新 javascript。

Here's a link to the original jsfiddle

var parentContainer = $('#mywraper');

function total() {

    var values = {}; // Optional****
    var total = 0;

    // Loops through parent containers children ( in this case div elements ).
    parentContainer.children().text(function( i, val ) {

        var value = parseInt( val );

        // Creates a variable where the variable name is based on the current elements index and value is based on the text inside the element. 
        values[ 'child_' + (i+1) ] = value; // Optional****

        // Sums up all the values
        total += value;

    });

    // The optional lines enable you independently check each value, for example:
    // console.log( values.child_1 )

    // Push total into the #total element.
    $('#total').html( total );

}

total();

这是一个使用点击事件更新值的示例。因此，您只需在点击事件中添加total()。

function total() {

  var parentContainer = $('#mywraper'),
      total = 0;

  parentContainer.children().text(function( i, val ) {
    total += parseInt( val );
  });

  $('#total').html( total );

}

total();

$('#updateBtn').on("click", function() {

  $('#mywraper').children().text(function( i, val ) {
    return parseInt( val ) + 1;
  });

  total();

});

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

<div id="mywraper">
      <div>4</div>
      <div>5</div>
	  <div>6</div>
</div>
<div id="total_div">
    Total $<span id="total"></span>
</div>

<button id="updateBtn">Update values</button>

【讨论】：