当用户清空购物车时,它会删除所有项目并重新加载页面。页面将重新加载以重置已激活的按钮(所有具有 .button 类的按钮都将重置为原始状态)应该有一种方法可以重置按钮而无需重新加载页面。代替执行位置的函数.reload,有一个函数可以将所有标志重置为"99美分.png"
<script>
$(".button").on('click', function(){
var flag = $(this).data('flag');
simpleCart.add({
name : $(this).attr("data-product-id"),
price : .99,
quantity : (flag ? -1 : 1)
});
$(this).attr("src", flag ? "99cents.png" : "m99cents.png");
$(this).data('flag', !flag);
});
function reloadFunction() {
location.reload();
}
</script>
将原始状态也存储在数据中。 调用 reloadFunction 时,可以从此属性检索状态并替换源属性。
在 html 中:
<img class="button" src="originalsrc.png" />
在 javascript 中:
$(function(){
$(".button").each(function(i,el)
{
var el = $(this);
el.data('flag-original', el.attr('src'));
});
});
function reloadFunction() {
$(".button").each(function()
{
var el = $(this);
el.text(el.data('flag-original'));
});
}
在对jquery进行了一些研究之后,我发现有一种方法可以使用,称为.removeData();有了这个,我能够通过在空购物车按钮中添加一个名为".empty"的类来实现所需的任务。这是我想出的有效的方法:
$(".empty").on('click', function(){
$(".button").attr("src", "99cents.png");
$(".button").removeData();
});
.removeData() 能够清除所有内容而无需刷新页面!
谢谢!