Question

我在外部.js文件中使用下面的代码，该文件正在加载到头部以设置并记住是否已单击按钮并向其添加新类（如果有）。

当浏览器强制重新加载页面时这很好用，但是当通过Ajax加载内容时非常有气质（这是我网站99％的内容加载内容）。

我知道这只是一个或两个doc准备好的情况，但是我在找到放置它们的地方时遇到了麻烦。

我尝试了什么..

1）将所有功能包装在一个$(document).ready(function(){中我甚至不确定这是否可行，但无论如何它都没有任何区别。

2）将各种功能包装在$(document).ready(function(){中，但似乎没有什么能使它可靠地工作。

有人可以建议最好的行动方案吗？

干杯;）

function loadInCartBt() {
itemInCart = sessionStorage.inCart;
return itemInCart
? JSON.parse(itemInCart) : [];
}

function saveInCartBt(inCart) {
sessionStorage.inCart = JSON.stringify(inCart);
}

function addbt2Cart(chbuyBt) {
$(chbuyBt).addClass('chbuyincart');
var inCart = loadInCartBt();
inCart.push(chbuyBt.id);
saveInCartBt(inCart);
}

function removeBtFromCart(chbuyBt) {
$(chbuyBt).removeClass('chbuyincart');
var inCart = loadInCartBt();
inCart.pop(chbuyBt.id);
saveInCartBt(inCart);
}


$(function(){
$.each(loadInCartBt(), function(i, chbuyBt){
$('#'+chbuyBt).addClass('chbuyincart');
});

$('.chbuyBt').on('click', function() {
var chbuyBt = this;
if (loadInCartBt().indexOf(chbuyBt.id) < 0) {
  addbt2Cart(chbuyBt);
} else {
  removeBtFromCart(chbuyBt);
}
});
});

function clearSessionStorage() {
sessionStorage.clear();
}

为清楚起见，这就是按钮的html：

<div class="chart-buy"><a href="javascript:void(0);" id="tk450" class="chbuyBt" onclick="addToBasket('450','track')"><span class="ch-buy-price">1.39</span></a></div>

Answer 1

Ok无法解决这个问题所以最终将上面的代码存储在一个名为local.js的不同文件中，并在我的页面页脚中调用它，如下所示：

<script type="text/javascript" src="js/local.js"></script>

完美无缺！

还将sessionStorage更改为localStorage，因为它更加健壮。

如果有人知道，仍然希望得到我原来问题的答案。

使用sessionStorage记住addClass - 仅在浏览器重新加载后才有效

1 个答案: