Question

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

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

Answer 2

尝试此经过测试的代码。或 Click here
注意：保持身份是唯一的

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

localStorage onclick添加/删除类

2 个答案: