javascript购物篮删除内容
我有一个购物篮,以及一些用于实时更新内容数量和总和的javascript方法。 javascript更新数量和总和使用以下方法完美同步:
$('#add-to-basket select').selectbox();
$('#contents select').selectbox().change(function (e) {
var product = $(this).parents('.product');
var ppu = product.find('.ppu').val();
product.find('.price .wrapper .value').text($(this).val() * ppu);
var total = 0;
$('.product .price .value').each(function (index, value) {
total += +$(value).text();
});
var form = $(this).parents('form');
form.ajaxSubmit(function () {
});
$('#total .value').text(total);
});
但是“从篮子中删除对象”方法没有更新总和...我设法编写的代码:
$('.drop-item').click(function(e) {
e.preventDefault();
var form = $(this).parents(form);
var item = $(this).parents('li');
var total = 0;
如何修改它以便当某人从购物篮中删除一些东西,总和会自动更新(不是通过 onclick 刷新页面,它会给我注入一些异常)? 我希望自动更新,就像上面的更新篮方法一样。
谢谢你!
编辑:整个代码:
$('#add-to-basket select').selectbox();
$('#contents select').selectbox().change(function (e) {
var product = $(this).parents('.product');
var ppu = product.find('.ppu').val();
product.find('.price .wrapper .value').text($(this).val() * ppu);
var total = 0;
$('.product .price .value').each(function (index, value) {
total += +$(value).text();
});
var form = $(this).parents('form');
form.ajaxSubmit(function () {
});
$('#total .value').text(total);
});
$('#delivery #address a').qtip({
content: 'Vei putea reveni la coș dând click pe <span>Coșul Meu</span> în meniu.'
});
$('.drop-item').click(function(e) {
e.preventDefault();
var form = $(this).parents(form);
var item = $(this).parents('li');
var total = 0;
$('.product .price .value').each(function (index, value) {
total += +$(value).text();
});
$('#total .value').text(total);
item.remove();
form.ajaxSubmit(function() {});
if ($('#contents li').length < 1)
{
$('#basket').remove();
$('#basket-breadcrumbs').remove();
$('#main').append('<p class="message">Coșul tău este gol.</p>');
}
});
i have a shopping basket, and some javascript methods for real time updating number of contents and sum.
The javascript updating quantity and the total sum are perfectly synchronised using the methods:
$('#add-to-basket select').selectbox();
$('#contents select').selectbox().change(function (e) {
var product = $(this).parents('.product');
var ppu = product.find('.ppu').val();
product.find('.price .wrapper .value').text($(this).val() * ppu);
var total = 0;
$('.product .price .value').each(function (index, value) {
total += +$(value).text();
});
var form = $(this).parents('form');
form.ajaxSubmit(function () {
});
$('#total .value').text(total);
});
but the 'drop object from basket' method is not updating the total sum...the code i have managed to write:
$('.drop-item').click(function(e) {
e.preventDefault();
var form = $(this).parents(form);
var item = $(this).parents('li');
var total = 0;
how can o modify it so that when someone deletes something from the basket, the sum to be updated automatically (not by onclick refreshing the page, it injects me some anomalies)?
I would like to be updated automatically just like it does on the above update basket method.
Thank you!
edit: the entire code:
$('#add-to-basket select').selectbox();
$('#contents select').selectbox().change(function (e) {
var product = $(this).parents('.product');
var ppu = product.find('.ppu').val();
product.find('.price .wrapper .value').text($(this).val() * ppu);
var total = 0;
$('.product .price .value').each(function (index, value) {
total += +$(value).text();
});
var form = $(this).parents('form');
form.ajaxSubmit(function () {
});
$('#total .value').text(total);
});
$('#delivery #address a').qtip({
content: 'Vei putea reveni la coș dând click pe <span>Coșul Meu</span> în meniu.'
});
$('.drop-item').click(function(e) {
e.preventDefault();
var form = $(this).parents(form);
var item = $(this).parents('li');
var total = 0;
$('.product .price .value').each(function (index, value) {
total += +$(value).text();
});
$('#total .value').text(total);
item.remove();
form.ajaxSubmit(function() {});
if ($('#contents li').length < 1)
{
$('#basket').remove();
$('#basket-breadcrumbs').remove();
$('#main').append('<p class="message">Coșul tău este gol.</p>');
}
});
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
如果您的意思是“总”变量没有改变,那是因为变量范围的原因。
当您在函数内部声明一个变量时,它是该函数的本地变量:只有该函数可以访问它并操作它。
因此,如果您想让 Total 变量成为全局变量(或具有更高的作用域,这意味着更多的东西可以访问它):
现在,请确保稍后不会在 var 语句中添加 Total 前缀;如上所述,这会创建一个局部变量并覆盖全局变量。
((编辑:这是对变量作用域的一个相当半途而废的解释。我建议你谷歌或搜索 Stackoverflow 来找到更多关于它的信息;这是 JavaScript 中非常重要的事情))
如果你的意思是从某个地方删除一个元素,使用 jQuery 的删除功能。
If you mean the "total" variable isn't changing, it's because of variable scoping.
When inside a function you declare a variable, it's local to the function: only the function can access it and manipulate it.
So, if you want to make the total variable global (or of higher scoping, meaning that more things can access it):
Now, make sure that you won't prefix total later on with the var statement; as said, this creates a local variable and overrides the global one.
((Edit: This was a rather half-assed explanation of what variable scoping is. I suggest you Google or search Stackoverflow to find more information about it; it's a very important thing in JavaScript))
If you mean removing an element from somewhere, use jQuery's remove function.