計算從複選框+選擇列表

Question

總價我想從選擇列表+複選框計算總價

這個代碼表示從列表中選擇元素的價格「電視」：

<script type="text/javascript"> 
$(document).ready(function() { 
var cheap = false; 
$('#tvs').change(function() { 
    var price = parseFloat($('.total').data('base-price')) || 0; 
    $('#tvs').each(function (i, el) { 
     price += parseFloat($('option:selected', el).data(cheap ? 'cheap' : 'price')); 
     console.log('x', price) 
     $('.total').val(price.toFixed(2) + '' + '$'); 
     }); 
     }); 
     }); 
</script> 



<input placeholder="0.00$" style=" width: 65px; border: 0px;" class="total" data-base-price="0" readOnly> 

並顯示選中的複選框的價格驗證碼：

 <script type="text/javascript"> 
     function update_amounts_modal() { 
var sum = 0.0; 
$('form').each(function() { 
    var qty = $(this).find('.qty').val(); 
    var price = $(this).find('.price').val(); 
    var isChecked = $(this).find('.idRow').prop("checked"); 
    if (isChecked){ 
     qty = parseInt(qty, 10) || 0; 
     price = parseFloat(price) || 0; 
     var amount = (qty * price); 
     sum += amount; 
    } 
}); 
$('.total-modal').text(sum.toFixed(2) + ' ' + '$'); 


    $().ready(function() { 
update_amounts_modal(); 
$('form .qty, form .idRow').change(function() { 
    update_amounts_modal(); 
    }); 
    }); 
</script> 


<div id="subusers" class="total-modal">0.00 $</div> 

Answer 1

嘿@我musa94假設你有一個相當大的應用程序，並將代碼分離爲文件，以及如何總結不同塊代碼中的兩個值。在不改變太多現有代碼的情況下，簡單的方法是定義一個共享數據對象，該對象包含要處理整個應用程序的值。您可以通過訪問數據對象中的值來將列表和複選框中的值加起來。

// define a data object that exists in your application 
window.__ = window.__ || { data: { total: 0, modal: 0 } }; 

$(document).ready(function() { 
    var cheap = false; 

    $('#tvs').change(function() { 
    var total = getTvsTotal(cheap); 
    // update your view 
    $('.total').val(total.toFixed(2) + '' + '$'); 
    // update your data object 
    __.data.total = total; 
    console.log('review data object', __); 
    }); 
}); 

$(document).ready(function() { 
    $('form .qty, form .idRow').change(function() { 
    var total = update_amounts_modal(); 
    $('.total-modal').text(total.toFixed(2) + ' ' + '$'); 

    __.data.modal = total; 
    console.log('review data object', __); 
    }); 
}); 

/** 
* calculate your tvs total 
* @param {boolean} 
* @return {number} 
*/ 
function getTvsTotal(cheap) { 
    var price = parseFloat($('.total').data('base-price')) || 0; 

    $('#tvs').each(function (i, el) { 
     price += parseFloat($('option:selected', el).data(cheap ? 'cheap' : 'price')); 
     console.log('list total:', price);  
    }); 

    return price; 
} 

/** 
* calculate your amounts modal 
* @return {number} 
*/ 
function update_amounts_modal() { 
    var sum = 0.0; 

    $('form').each(function() { 
    var qty = $(this).find('.qty').val(); 
    var price = $(this).find('.price').val(); 
    var isChecked = $(this).find('.idRow').prop("checked"); 
    var amount; 

    if (isChecked){ 
     qty = parseInt(qty, 10) || 0; 
     price = parseFloat(price) || 0; 
     amount = qty * price; 
     sum += amount; 
    } 
    console.log('sum:', sum); 
    }); 

    return sum; 
}