如何使用jquery動態獲取總計

我有與酒店房間相關的價格國籍下拉。現在我想動態地添加顯示的價格並輸出它。如何使用jquery動態獲取總計

<div class="Total"></div> 
<div class="rum_name">Room name</div> 
<div class="nationality"> 
<select class="sel_nationality" name="nationality"> 
<option roomprice="30" value="63">SAARC</option> 
<option roomprice="50" selected="selected" value="65">American/ European</option> 
<option roomprice="45" value="67">Japnese/ Korean</option> 
<option roomprice="38" value="69">All Others</option> 
</select> 
<div class="Price"> 
Price: 
<span class="selectedPrice"></span> 
</div> 
</div> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
     var total = 0; 
     $('.sel_nationality').change(function(){ 
      $price = $('option:selected', this).attr('roomprice'); 
      $parent = $(this).parents('.nationality'); 
      $parent.find('span.selectedPrice').text($price); 
      $tot_price = $(this).val(); 
      $(this).each(function(){ 
       total += parseInt(this.value); 
      }) 
      $('.Total').text(total); 
     }) 
      }) 
</script>

可能有超過1個房間和每個以上的選項。現在我想動態地改變總價格作爲輸出的價格。感謝

來源

2012-12-26 samjhana joshi

請使用parseInt（val，10）。我的意思是基數10！ –

@Murali不能相當抓住你。請你詳細說明一下。 –

你在說什麼薩米，它是爲一個房間工作，但不是爲多個房間工作？ –

以及傢伙，我想我不能夠給你我的問題的正確的想法，但我找到了解決辦法。

<script type="text/javascript"> 
    $(document).ready(function(){ 
     var total = 0; 
     $('.selectedPrice').each(function(){ 
      total = +$(this).text()+ total; 
     }); 
     $('.Total').text(total); 
     $('.sel_nationality').change(function(){ 
      $price = $('option:selected', this).attr('roomprice'); 
      $parent = $(this).parents('.nationality'); 
      $parent.find('span.selectedPrice').text($price); 
      var total = 0; 
      $('.selectedPrice').each(function(){ 
       total = +$(this).text()+ total; 
      }); 
      $('.Total').text(total); 

     }) 


    }) 
</script>

無論如何謝謝你們寶貴的時間和SORRY，如果我不能給你的想法。

來源

2012-12-26 10:59:54

需要清除每個變化總，否則只會繼續增加了：

$(document).ready(function() { 
    $('.sel_nationality').on('change', function() { 
     var total = 0, //reset the total, notice commas declearing vars 
      $price = $('option:selected', this).attr('roomprice'), 
      $parent = $(this).parents('.nationality'), 
      $tot_price = this.value; 

     $parent.find('span.selectedPrice').text($price); 

     $('.sel_nationality').each(function() { //iterate all, not just this one 
      total += parseInt(this.value, 10); //use radix 
     }); 
     $('.Total').text(total); 
    }); 
});

您需要遍歷所有.sel_nationality元素，不只是this，作爲would'nt真的需要每個循環，並且將變量刪除，就好像你不這樣做，它們將是全局的，如果它們以美元標誌開始並不重要，它們仍然應該使用關鍵字var進行刪除。

作爲旁註，roomprice不是有效的屬性，並且HTML5數據屬性將是更好的選擇。

來源

2012-12-26 10:00:17 adeneo

試試這個

$(document).ready(function(){ 

    $('.sel_nationality').change(function(){ 
     var total = 0; //let the total be 0 whenever the chnages is made 
     $price = $('option:selected', this).attr('roomprice'); 
     $parent = $(this).parents('.nationality'); 
     $parent.find('span.selectedPrice').text($price); 
     $tot_price = $(this).val(); 
     $(this).each(function(){ 
      total += parseInt(this.value); 
     }) 
     $('.Total').text(total); 
    }) 
    })

來源

2012-12-26 10:04:07 bipen

薩米我想你會發現，你的解決方案簡化到這一點：

$(document).ready(function() { 
    $('.sel_nationality').change(function() { 
     var $price = $('option:selected', this).attr('roomprice');//remember to localize vars 
     $(this).closest('.nationality').find('.selectedPrice').text($price); 
     var total = 0; 
     $('.selectedPrice').each(function() { 
      total += Number($(this).text()); 
     }); 
     $('.Total').text(total); 
    }).trigger('change'); 
});

通過觸發選擇菜單，‘變革’的活動，你會避免需要重複的總計算，並導致最初選擇價格要顯示。

來源

2012-12-28 08:43:47

感謝發佈瞭解新事物。對於像我這樣的新手來說，這非常有幫助和知識。 –

如何使用jquery動態獲取總計

回答

相關問題