localStorage onclick 添加/删除类答案

【问题标题】：localStorage onclick add/remove classlocalStorage onclick 添加/删除类
【发布时间】：2020-01-07 22:31:59
【问题描述】：

下面的 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>

【问题讨论】：

短语“不适合我”是问题中的一个危险信号 - 您需要定义究竟发生了什么，以及它与您的预期有何不同。特别是在这种情况下，当 Stack Snippets 无法重现您的问题时。一方面，您的点击处理程序可以在文档准备好之前设置，因此<li> 元素实际上并没有设置它。另一方面，重新加载可以将所有项目都涂成红色，因为您不会将选择的元素保存在存储中。还有一种可能性是完全破坏了其他东西，因为您必须更改 Stack Snippet 的代码结构。
更新“没有得到预期的输出”也好不到哪里去。请具体说明您的系统确切的行为方式，以及它与您想要的具体的不同之处。例如。 "当我点击第二个<li> 时，它变成红色，但当我重新加载时，所有元素都显示为雷云"，"当我点击第二个<li> 时，我的电脑爆炸了，但我期望看到的是单击的列表项变为红色并且没有任何爆炸”，或类似的。
@Saravana 实际上你需要，在页面重新加载后点击 li active 吗？
@ShafeelSha 是的。正是

标签： javascript jquery html css local-storage

【解决方案1】：

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

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

这是我的Fiddle link，您可以在其中检查您的输出。注意：在执行代码之前清除你的 localStorage。

【讨论】：

当我整合到我的网站时，它在重新加载页面后全部变为li.active。
让我给你小提琴链接，你可以在那里测试它。并在执行之前清除本地存储。 @Saravana
我只能投票。但没有得到想要的输出。
你想要的输出是什么？ @Saravana
请参阅下面的@shafeel sha 我得到了解决方案。

【解决方案2】：

试试这个经过测试的代码。或 Click here
注意：保持 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

【讨论】：

我必须保留li的ID？
当然，那个id标识点击的li
在此处将您的代码发布到 sn-p 中。我可以标记为有效。