需要幫助添加具有整數值的div元素

我有三個DIV，其內容是整數值並且經常從其他源更新。我的主要想法是將三個div的內容解析爲float或integer，將它們添加並顯示在另一個div中。我期待着使用onchange（）函數處理div中的內容，因爲它們中的內容會頻繁更改。下面是我的代碼，它目前不工作，如果你給我一個這方面的幫助，我會非常感激。這個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()"> 
 
\t  4 
 
     </div> 
 
     <div id="div2" onchange="total()"> 
 
\t  5 
 
     </div> 
 
\t <div id="div2" onchange="total()"> 
 
\t  6 
 
     </div> 
 
</div> 
 
<div id="total_div"> 
 
    Total $<span id="total"></span> 
 
    </div> 
 
</body> 
 
</html>

來源

2015-03-03 Evanson

jQuery的對象不具有方法'.innerHTML（）'。改用'.html（）'。 – Regent 2015-03-03 09:54:56

或使用'.text（）' - 函數 – empiric 2015-03-03 09:57:20

此外，你有重複的ID，它不會工作...類似的問題在這裏解釋：http://stackoverflow.com/questions/6676186/use-onchange-in- a-div – sinisake 2015-03-03 10:04:29

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

來源

2015-03-03 09:56:17

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

來源

2015-03-03 09:58:29

請擴展您的答案，顯示如何和*爲什麼*它解決了問題所帶來的問題 - 這將有助於其他人在未來，你更有可能得到讚揚！ – 2015-03-03 10:02:50

試試這個：

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/

來源

2015-03-03 10:07:56

我真的不想回答，因爲這可能是很難解決由於這一事實，我們不知道該值是如何在第一時間更新。但是，我最終做了一個相對廣泛的例子，所以我們就在這裏。

因此，如前所述，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();

下面是其中的值與click事件更新的例子。因此，您所做的只是在點擊事件中添加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> 
 
\t <div>6</div> 
 
</div> 
 
<div id="total_div"> 
 
    Total $<span id="total"></span> 
 
</div> 
 

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

來源

2015-03-03 12:27:48 Joonas

需要幫助添加具有整數值的div元素

回答

相關問題