javascript - 将变量标志重置为原始状态

Question

当用户清空购物车时，它会删除所有商品并重新加载页面。页面将重新加载以重置已激活的按钮(所有具有 .button 类的按钮将重置为原始状态)应该有一种方法可以重置按钮而无需重新加载页面。有一个函数可以将所有标志重置为“99cents.png”，而不是执行 location.reload 的函数

<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>

Answer 1

还将原始状态存储在数据中。当调用 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'));
                    });
}