本地存储单击添加/删除类

下面的onclick事件工作正常。我希望在我们重新加载页面后，相同的事件也应该起作用。我尝试实现 localStorage 方法，但没有得到预期的输出。

有人帮我解决这个问题。提前感谢！

我尝试过的脚本：

$("ul li").click(function () {
$('ul li').removeClass("one");
$(this).toggleClass("active");
localStorage.setItem('listItem', 'one');
}); 
$(document).ready(function(){   
if(localStorage.getItem('listItem') == 'one') {                               
$('ul li').addClass("active");
}
});

$('ul li').click(function(){	
$("ul li").removeClass("active");
$(this).addClass("active");
});

ul li.active {
color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>

这是您问题的完美解决方案

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style type="text/css">
ul li.active {
color: red;
}
</style>
</head>
<body id="hello">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</body>
</html>
<script type="text/javascript">
$('ul li').click(function(){    
$("ul li").removeClass("active");
$('ul li').removeAttr('id');
$(this).addClass("active");

var activeElement =  $(this).text();
console.log(activeElement);
localStorage.setItem('active', activeElement);
});
$(document).ready(function(){
$( "ul li" ).each(function( index ) {
if($( this ).text() == localStorage.getItem('active')){
$(this).addClass("active");
}
});
});
</script>

这是我的小提琴链接，您可以在其中检查输出。注意：在执行代码之前清除本地存储。

试试这个经过测试的代码。或点击这里
注意：保留 li id 是唯一的

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style type="text/css">
ul li.active {
color: red;
}
</style>
</head>
<body >
<ul>
<li id="1">One</li>
<li id="2">Two</li>
<li id="3">Three</li>
</ul>
</body>
</html>
<script type="text/javascript">
$(document).ready(function() {
$("ul li").each(function(index) {
if ($(this).attr('id') == localStorage.getItem("Activeli")) {
$(this).addClass("active");
}
});
response = JSON.parse(localStorage.getItem("wishlistID"));
$('a[data-pdtId="' + response + '"]').addClass('active')
});

$('ul li').click(function() {
$("ul li").removeClass("active");
$(this).addClass("active");
var id = $(this).attr("id");
console.log(id);
localStorage.setItem("Activeli", id); //create a localstorage
});
</script>

Hope this help you, thanks

相关内容

最新更新

热门标签：