如何總結jquery生成的動態值？

傢伙你好我完全是新來的其實我要解決這個問題，能得到（幾乎）解決方案從這裏如何總結jquery生成的動態值？

我把所有的想法的問題是我不能輸出總傷心，我真的很小白，當談到jQuery的

我想要做的是總結所有的，所以我可以有總賬單這裏是我的代碼

$(document).ready(function() { 
 

 
\t $('input:radio[name="meal"]').change(function(ev){ 
 
     
 
\t \t if ($(this).val() == 'Burger with fries') {  
 
\t \t \t var meal = 20; 
 
\t \t } 
 
     else {    
 
\t \t \t var meal = 30; 
 
     } \t 
 
\t \t 
 
     $('#meal').html((meal).toFixed(2)); 
 

 
    }); \t 
 

 
\t $('input:radio[name="drinks"]').change(function(ev){ 
 
\t 
 
\t \t if ($(this).val() == 'Ice Tea') { 
 
      var drinks = 1; 
 
     } 
 
     else if ($(this).val() == 'Coke') { 
 
      var drinks = 1.20; 
 
     } 
 
     else if ($(this).val() == 'Lemonade') { 
 
      var drinks = 2; 
 
     } 
 
     else if ($(this).val() == 'Water') { 
 
      var drinks = 1.75; 
 
     } 
 
     else if ($(this).val() == 'Hot choco') { 
 
      var drinks = 3; 
 
     } 
 
     else if ($(this).val() == 'Hot coffee') { 
 
      var drinks = 1.25; 
 
     } 
 
     else { 
 
      var drinks = 0; 
 
     } 
 
\t \t 
 
\t \t $('#drinks').html((drinks).toFixed(2)); 
 
\t }); \t 
 

 

 
\t $('input:radio[name="extras"]').change(function(ev){ 
 
\t \t 
 
\t \t if ($(this).val() == 'Rice') { 
 
      var extras = 10; 
 
     } 
 
\t \t else if ($(this).val() == 'Gravy') { 
 
      var extras = 5; 
 
     } 
 
     else { 
 
      var extras = 0; 
 
     } 
 
\t \t $('#extras').html((extras).toFixed(2)); 
 
\t }); 
 
\t 
 
\t \t $('textarea[name="spoon"]').keyup(function(ev){ 
 
\t  
 
\t var spoon = $(this).val().replace(/\n/g, '<br/>'); 
 
\t var spoon = spoon*2; 
 
\t $("#spoon").html(spoon); \t 
 
    
 
\t }); 
 

 
$('input:text[name="fork"]').keyup(function(ev){ 
 
\t  
 
\t var fork = $(this).val().replace(/\n/g, '<br/>'); 
 
\t var fork = fork*1.25; 
 
\t $("#fork").html(fork);   
 
\t }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<h1>Calculator base on radio buttons</h1> 
 
<h2>Question 1: Meal</h2> 
 
<div> 
 
<label class="radio"><input name="meal" value="Burger with fries" type="radio"/>Burger with fries</label> 
 
</div> 
 
<div> 
 
<label class="radio"><input name="meal" value="Chicken with rice" type="radio" />Chicken with rice</label> 
 
</div> 
 

 
<h2>Question 2: Drinks</h2> 
 
<div> 
 
<input type="radio" name="drinks" value="Ice Tea" /> Ice Tea 
 
<input type="radio" name="drinks" value="Coke" /> Coke 
 
<input type="radio" name="drinks" value="Lemonade" /> Lemonade 
 
<input type="radio" name="drinks" value="Water" /> Water 
 
<input type="radio" name="drinks" value="Hot choco" /> Hot choco 
 
<input type="radio" name="drinks" value="Hot coffee" /> Hot coffee 
 
<input type="radio" name="drinks" value="No drinks" /> No drinks 
 
</div> 
 

 
<h2>Question 3: Extras</h2> 
 
<div> 
 
<input type="radio" name="extras" value="Rice" /> Rice 
 
<input type="radio" name="extras" value="Gravy" /> Gravy 
 
<input type="radio" name="extras" value="No Extra" /> No Extra 
 
</div> 
 

 
<h2>Question 4: How many extra spoon?</h2> 
 
<div> 
 
<textarea name="spoon" rows="3"></textarea> 
 
</div> 
 

 
<h2>Question 5: How many extra fork?</h2> 
 
<div> 
 
<input name="fork" type="text" value="" placeholder=""/> 
 
</div> 
 

 
<hr /> 
 
<div> 
 
<b>Meal:</b> <span id="meal"></span> 
 
<div></div> 
 
<b>Drinks:</b> <span id="drinks"></span> 
 
<div></div> 
 
<b>Extras:</b> <span id="extras"></span> 
 
<div></div> 
 
<b>Spoon:</b> <span id="spoon"></span> 
 
<div></div> 
 
<b>Fork:</b> <span id="fork"></span> 
 
</div> 
 

 
<div> 
 
\t <h3> 
 
\t <b>Total:</b><span id="total"></span> 
 
\t </h3> 
 
</div>

來源

2017-02-17 cryptohustla

可以更改HTML結構

使用這個網址的jsfiddle - 即可以將數據添加屬性的投入？ – Pete

而是使用：

$('#drinks').html('string')

爲了改變跨度文本可以使用

$('#drinks').text('string')

無論何時更改跨度值（即：膳食，飲料.. ）您可以觸發更改事件，以便處理。一個例子是：

$("#fork").text(fork).trigger('change');

現在，您可以創建一個更改處理程序，您可以在其中更新總數。有可能使用JavaScript函數reduce計算總：

$('#meal, #drinks, #extras, #spoon, #fork').on('change', function(e) { 
    var total = $('#meal, #drinks, #extras, #spoon, #fork') 
          .toArray().reduce(function(acc, val) { 
     return acc + +val.textContent ; 
    }, 0); 
    $('#total').text(total.toFixed(2)); 
})

的片段：

$(document).ready(function() { 
 

 
    $('input:radio[name="meal"]').change(function(ev){ 
 

 
     if ($(this).val() == 'Burger with fries') { 
 
      var meal = 20; 
 
     } 
 
     else { 
 
      var meal = 30; 
 
     } 
 

 
     $('#meal').text((meal).toFixed(2)).trigger('change'); 
 

 
    }); 
 

 
    $('input:radio[name="drinks"]').change(function(ev){ 
 

 
     if ($(this).val() == 'Ice Tea') { 
 
      var drinks = 1; 
 
     } 
 
     else if ($(this).val() == 'Coke') { 
 
      var drinks = 1.20; 
 
     } 
 
     else if ($(this).val() == 'Lemonade') { 
 
      var drinks = 2; 
 
     } 
 
     else if ($(this).val() == 'Water') { 
 
      var drinks = 1.75; 
 
     } 
 
     else if ($(this).val() == 'Hot choco') { 
 
      var drinks = 3; 
 
     } 
 
     else if ($(this).val() == 'Hot coffee') { 
 
      var drinks = 1.25; 
 
     } 
 
     else { 
 
      var drinks = 0; 
 
     } 
 

 
     $('#drinks').text((drinks).toFixed(2)).trigger('change'); 
 
    }); 
 

 

 
    $('input:radio[name="extras"]').change(function(ev){ 
 

 
     if ($(this).val() == 'Rice') { 
 
      var extras = 10; 
 
     } 
 
     else if ($(this).val() == 'Gravy') { 
 
      var extras = 5; 
 
     } 
 
     else { 
 
      var extras = 0; 
 
     } 
 
     $('#extras').text((extras).toFixed(2)).trigger('change'); 
 
    }); 
 

 
    $('textarea[name="spoon"]').keyup(function(ev){ 
 

 
     var spoon = $(this).val().replace(/\n/g, '<br/>'); 
 
     $("#spoon").text(spoon).trigger('change'); 
 

 
    }); 
 

 
    $('input:text[name="fork"]').keyup(function(ev){ 
 

 
     var fork = $(this).val().replace(/\n/g, '<br/>'); 
 
     $("#fork").text(fork).trigger('change'); 
 
    }); 
 

 

 

 
    $('#meal, #drinks, #extras, #spoon, #fork').on('change', function(e) { 
 
     var total = $('#meal, #drinks, #extras, #spoon, #fork').toArray().reduce(function(acc, val) { 
 
      return acc + +val.textContent ; 
 
     }, 0); 
 
     $('#total').text(total.toFixed(2)); 
 
    }) 
 

 
});

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

 

 
<h1>Calculator base on radio buttons</h1> 
 
<h2>Question 1: Meal</h2> 
 
<div> 
 
    <label class="radio"><input name="meal" value="Burger with fries" type="radio"/>Burger with fries</label> 
 
</div> 
 
<div> 
 
    <label class="radio"><input name="meal" value="Chicken with rice" type="radio" />Chicken with rice</label> 
 
</div> 
 

 
<h2>Question 2: Drinks</h2> 
 
<div> 
 
    <input type="radio" name="drinks" value="Ice Tea" /> Ice Tea 
 
    <input type="radio" name="drinks" value="Coke" /> Coke 
 
    <input type="radio" name="drinks" value="Lemonade" /> Lemonade 
 
    <input type="radio" name="drinks" value="Water" /> Water 
 
    <input type="radio" name="drinks" value="Hot choco" /> Hot choco 
 
    <input type="radio" name="drinks" value="Hot coffee" /> Hot coffee 
 
    <input type="radio" name="drinks" value="No drinks" /> No drinks 
 
</div> 
 

 
<h2>Question 3: Extras</h2> 
 
<div> 
 
    <input type="radio" name="extras" value="Rice" /> Rice 
 
    <input type="radio" name="extras" value="Gravy" /> Gravy 
 
    <input type="radio" name="extras" value="No Extra" /> No Extra 
 
</div> 
 

 
<h2>Question 4: How many extra spoon?</h2> 
 
<div> 
 
    <textarea name="spoon" rows="3"></textarea> 
 
</div> 
 

 
<h2>Question 5: How many extra fork?</h2> 
 
<div> 
 
    <input name="fork" type="text" value="" placeholder=""/> 
 
</div> 
 

 
<hr /> 
 
<div> 
 
    <b>Meal:</b> <span id="meal"></span> 
 
    <div></div> 
 
    <b>Drinks:</b> <span id="drinks"></span> 
 
    <div></div> 
 
    <b>Extras:</b> <span id="extras"></span> 
 
    <div></div> 
 
    <b>Spoon:</b> <span id="spoon"></span> 
 
    <div></div> 
 
    <b>Fork:</b> <span id="fork"></span> 
 
</div> 
 

 
<div> 
 
    <h3> 
 
     <b>Total:</b><span id="total"></span> 
 
    </h3> 
 
</div>

來源

2017-02-17 15:54:37 gaetanoM

這是偉大的，它只是一個較大的腳本的一部分，但我肯定會回來..謝謝你的輸入.. – cryptohustla

可以命名個別項目與類名達說：「itemAmount 「然後使用jquery .each函數來選擇個別金額並添加這些來獲取總金額。

請參閱我對代碼所作的修改，修改標記爲粗體。我添加了一個函數來檢查文本是否是數字isNumeric和updateTotal（）來添加項目並更新總數。如果你想看到它在行動https://jsfiddle.net/princedc/wnsa61g8/

$(document).ready(function() { 

     $('input:radio[name="meal"]').change(function(ev){ 

      if ($(this).val() == 'Burger with fries') {  
       var meal = 20; 
      } 
      else {    
       var meal = 30; 
      } 

      $('#meal').html((meal).toFixed(2)); 
      updateTotal(); 
     }); 

function updateTotal(){ 
    var totalAmount = 0.0; 
     $('.itemAmount').each(function() { 
      if(isNumeric($(this).text())){ 
       totalAmount = totalAmount + parseFloat($(this).text()); 
       $('#total').text(totalAmount.toFixed(2)); 
      } 

     }); 
} 

    function isNumeric(n) { 
     return !isNaN(parseFloat(n)) && isFinite(n); 
    } 

     $('input:radio[name="drinks"]').change(function(ev){ 

      if ($(this).val() == 'Ice Tea') { 
       var drinks = 1; 
      } 
      else if ($(this).val() == 'Coke') { 
       var drinks = 1.20; 
      } 
      else if ($(this).val() == 'Lemonade') { 
       var drinks = 2; 
      } 
      else if ($(this).val() == 'Water') { 
       var drinks = 1.75; 
      } 
      else if ($(this).val() == 'Hot choco') { 
       var drinks = 3; 
      } 
      else if ($(this).val() == 'Hot coffee') { 
       var drinks = 1.25; 
      } 
      else { 
       var drinks = 0; 
      } 

      $('#drinks').html((drinks).toFixed(2)); 
      updateTotal(); 
     }); 


     $('input:radio[name="extras"]').change(function(ev){ 

      if ($(this).val() == 'Rice') { 
       var extras = 10; 
      } 
      else if ($(this).val() == 'Gravy') { 
       var extras = 5; 
      } 
      else { 
       var extras = 0; 
      } 
      $('#extras').html((extras).toFixed(2)); 
     updateTotal(); 
     }); 

      $('textarea[name="spoon"]').keyup(function(ev){ 

     var spoon = $(this).val().replace(/\n/g, '<br/>'); 
     var spoon = spoon*2; 
     $("#spoon").html(spoon);  
     updateTotal(); 
     }); 

    $('input:text[name="fork"]').keyup(function(ev){ 

     var fork = $(this).val().replace(/\n/g, '<br/>'); 
     var fork = fork*1.25; 
     $("#fork").html(fork);  
     **updateTotal();** 
     }); 

    });

來源

2017-02-17 16:10:03

我真的很喜歡這個想法，但我想我會堅持與其他解決方案謝謝:) – cryptohustla

如何總結jquery生成的動態值？

回答

相關問題