我正在开发自己的超市网站，我有一个来自webiste的实时计算脚本，如果在我的弹出页面中应用它来进行实时计算，例如：1公斤大米（200美元）x 2个数量=400$。这个概念应用在这个页面上，不起作用。请派人来帮我。基本上，我需要基于量化和千克选择的实时计算。
<script type='text/javascript' src='//code.jquery.com/jquery-2.1.0.js'></script>
<script type="text/javascript">
$('#size').change(function() {
updateValues();
});
$('#qty').keyup(function() {
updateValues();
});
function updateValues(){
// Remove any previously set values
$('#show_box, #total_box').empty();
var qty = document.getElementById("qty").value;
var price = 0;
var rate = 0;
$('#size').find('option:selected').each(function() {
// Check that the attribute exist, so that any unset values won't bother
if ($(this).attr('data-price')) {
price = $(this).data('price');
rate = price*qty;
$('#show_box').append('<h6>' + rate + '</h6>');
}
});
$('#total_box').text(rate);
} </script><!--==================================
Quick view modal window
======================================-->
<div id="quick_view" class="modal_window">
<button class="close arcticmodal-close"></button>
<div class="clearfix">
<!-- - - - - - - - - - - - - - Product image column - - - - - - - - - - - - - - - - -->
<div class="single_product">
<!-- - - - - - - - - - - - - - Image preview container - - - - - - - - - - - - - - - - -->
<div class="image_preview_container" id="qv_preview">
<img id="img_zoom" data-zoom-image="images/qv_large_1.JPG" src="images/qv_img_1.jpg" alt="">
</div><!--/ .image_preview_container-->
<!-- - - - - - - - - - - - - - End of image preview container - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - Prodcut thumbs carousel - - - - - - - - - - - - - - - - -->
<div class="product_preview" data-output="#qv_preview">
<div class="owl_carousel" id="thumbnails">
<img src="images/qv_thumb_1.jpg" data-large-image="images/qv_img_1.jpg" alt="">
<img src="images/qv_thumb_2.jpg" data-large-image="images/qv_img_2.jpg" alt="">
<img src="images/qv_thumb_3.jpg" data-large-image="images/qv_img_3.jpg" alt="">
<img src="images/qv_thumb_4.jpg" data-large-image="images/qv_img_4.jpg" alt="">
</div><!--/ .owl-carousel-->
</div><!--/ .product_preview-->
<!-- - - - - - - - - - - - - - End of prodcut thumbs carousel - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - Share - - - - - - - - - - - - - - - - -->
<div class="v_centered">
<span class="title">Share this:</span>
<div class="addthis_widget_container">
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<!-- AddThis Button END -->
</div>
</div>
<!-- - - - - - - - - - - - - - End of share - - - - - - - - - - - - - - - - -->
</div>
<!-- - - - - - - - - - - - - - End of product image column - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - Product description column - - - - - - - - - - - - - - - - -->
<div class="single_product_description">
<h3><a href="#">Ivory Body Wash, Original 24 fl oz</a></h3>
<div class="description_section v_centered">
<!-- - - - - - - - - - - - - - Product rating - - - - - - - - - - - - - - - - -->
<ul class="rating">
<li class="active"></li>
<li class="active"></li>
<li class="active"></li>
<li></li>
<li></li>
</ul>
<!-- - - - - - - - - - - - - - End of product rating - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - Reviews menu - - - - - - - - - - - - - - - - -->
<ul class="topbar">
<li><a href="#">3 Review(s)</a></li>
<li><a href="#">Add Your Review</a></li>
</ul>
<!-- - - - - - - - - - - - - - End of reviews menu - - - - - - - - - - - - - - - - -->
</div>
<div class="description_section">
<table class="product_info">
<tbody>
<tr>
<td>Manufacturer: </td>
<td><a href="#">Chanel</a></td>
</tr>
<tr>
<td>Availability: </td>
<td><span class="in_stock">in stock</span> 20 item(s)</td>
</tr>
<tr>
<td>Product Code: </td>
<td>PS06</td>
</tr>
</tbody>
</table>
</div>
<hr>
<div class="description_section">
<p>Mauris fermentum dictum magna. Sed laoreet aliquam leo. Ut tellus dolor, dapibus eget, elementum vel, cursus eleifend, elit. Aenean auctor wisi et urna.</p>
</div>
<hr>
<p class="product_price"><s>$9.99</s> <b class="theme_color">$5.99</b></p>
<!-- - - - - - - - - - - - - - Product size - - - - - - - - - - - - - - - - -->
<div class="description_section_2 v_centered">
<span class="title">Size:</span>
<div class="custom_select min">
<select id="size" >
<option id="def" value="default" selected>select a course</option>
<option id="mth" data-price="100" value="1">1 kg</option>
<option id="eng" data-price="200" value="2">2 kg</option>
<option id="chm" data-price="300" value="3">3 kg</option>
<option id="phy" data-price="400" value="4">4 kg</option>
</select>
</div>
</div>
<!-- - - - - - - - - - - - - - End of product size - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - Quantity - - - - - - - - - - - - - - - - -->
<div class="description_section_2 v_centered">
<span class="title">Qty:</span>
<div class="qty min clearfix">
<button class="theme_button" data-direction="minus">-</button>
<button class="theme_button" data-direction="minus">-</button>
<input type="text" value="2" id="qty">
<button class="theme_button" data-direction="plus">+</button>
</div>
<!-- - - - - - - - - - - - - - End of quantity - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - Product actions - - - - - - - - - - - - - - - - -->
<div class="buttons_row">
<button class="button_blue middle_btn">Add to Cart</button>
<button class="button_dark_grey def_icon_btn middle_btn add_to_wishlist tooltip_container"><span class="tooltip top">Add to Wishlist</span></button>
<button class="button_dark_grey def_icon_btn middle_btn add_to_compare tooltip_container"><span class="tooltip top">Add to Compare</span></button>
</div>
<!-- - - - - - - - - - - - - - End of product actions - - - - - - - - - - - - - - - - -->
</div>
<!-- - - - - - - - - - - - - - End of product description column - - - - - - - - - - - - - - - - -->
</div>
</div>
<!--==================================
End quick view modal window
====================================== -->因此也将更改事件添加到文本框中。
$('#wow, #qty').change(function() {
只需创建一个带有calcul处理的函数。并对每个表单元素的特定事件调用函数：change表示选择，keyup表示输入文本。
$('#wow').change(function() {
updateValues();
});
$('#qty').keyup(function() {
updateValues();
});
function updateValues(){
// Remove any previously set values
$('#show_box, #total_box').empty();
var qty = document.getElementById("qty").value;
var price = 0;
var rate = 0;
$('#wow').find('option:selected').each(function() {
// Check that the attribute exist, so that any unset values won't bother
if ($(this).attr('data-price')) {
price = $(this).data('price');
rate = price*qty;
$('#show_box').append('<h6>' + rate + '</h6>');
}
});
$('#total_box').text(rate);
}
编辑：
在你编辑后，我试图了解你的需求。不确定你想要什么，但我希望如此。
我对HTML做了一些修改（HTML元素的一些新ID）。
这里有一个测试变化的小提琴：小提琴
我假设您的代码中包含一个jQuery。
Javascript
<script type="text/javascript">
//Calculate price on size change
$(document).on('change', '#size', function() {
updateValues();
});
//Calcule price on qty change
$(document).on('keyup', '#qty', function() {
//If qty is not a number, force default value : 1
if(true === isNaN($(this).val()))
{
$(this).val(1);
}
updateValues();
});
//Change qty and calculate price when clicking on + or -
$(document).on('click', '.theme_button', function(){
var qty = $('#qty').val();
//Il qty is not a number : default value is 1
if(true === isNaN(qty))
{
qty = 1;
}
else
{
//Check if qty is incremented or decremented
qty = parseInt(qty);
if('plus' == $(this).attr('data-direction'))
{
qty++;
}
else
{
qty--;
}
//Min value for qty is 1
if(qty <= 0)
{
qty = 1;
}
}
$('#qty').val(qty);
updateValues();
});
//Calculate price for qty and size
function updateValues(){
// Remove any previously set values
$('#product_price').empty();
var qty = document.getElementById("qty").value;
var price = 0;
var rate = 0;
$('#size').find('option:selected').each(function() {
// Check that the attribute exist, so that any unset values won't bother
if ($(this).attr('data-price')) {
price = $(this).data('price');
rate = price*qty;
}
});
$('#product_price').text('$'+rate);
}
</script>
HTML:
<p id="product_price">Choose a product</p>
<!-- - - - - - - - - - - - - - Product size - - - - - - - - - - - - - - - - -->
<div class="description_section_2 v_centered">
<span class="title">Size:</span>
<div class="custom_select min">
<select id="size" >
<option id="def" value="default" selected>select a course</option>
<option id="mth" data-price="100" value="1">1 kg</option>
<option id="eng" data-price="200" value="2">2 kg</option>
<option id="chm" data-price="300" value="3">3 kg</option>
<option id="phy" data-price="400" value="4">4 kg</option>
</select>
</div>
</div>
<!-- - - - - - - - - - - - - - End of product size - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - Quantity - - - - - - - - - - - - - - - - -->
<div class="description_section_2 v_centered">
<span class="title">Qty:</span>
<div class="qty min clearfix">
<button class="theme_button" data-direction="minus">-</button>
<input type="text" value="2" id="qty">
<button class="theme_button" data-direction="plus">+</button>
</div>
<!-- - - - - - - - - - - - - - End of quantity - - - - - - - - - - - - - - - - -->