Question

我有三个DIV，其内容是整数值，并且经常从其他来源更新。我的主要想法是将三个div的内容解析为float或integer，添加它们并在另一个div中显示总数。我期待使用onchange（）函数处理div中的内容，因为它们中的内容将经常更改。下面是我的代码，它目前无法正常工作，如果你能给我一些帮助，我将非常感激。这个div中的内容将经常使用文本输入进行更新，你可以创建一个文本inout来操作第一个div然后显示整个总和提前谢谢。

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 2

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

Answer 3

试试这个：

 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/

Answer 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()。

＆＃13;

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

＆＃13;

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

＆＃13;

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

4 个答案: