Question

我在完成这项工作时遇到了一些困难，无法弄清楚导致问题的原因。基本上我正在检查本地存储是否有项目3步，如果没有创建它并给它值1.通过使值为1然后将类“选择”添加到第一个LI，如果值为2则添加类“选择“到第二个LI，依此类推 - 这是在点击按钮时发生的，它正在将值正确保存到本地存储。

但是，当页面刷新并检查以查看添加“已选择”类的li时，它不起作用。仅在值为1时有效，然后将该类添加到第一个LI，其他LI由于某种原因不起作用。

 var ls;
 if( localStorage.getItem('3-step') == null ) {
    var ls = 1;
    localStorage.setItem('3-step', ls);
 } else {
    var ls = parseInt( localStorage.getItem('3-step') );
    if( ls == 1 ) {
       $('#li-one').addClass('selected');
    } else if ( ls == 2 ) {
       $('#li-two').addClass('selected');
    } else if ( ls == 3 ) {
       $('#li-three').addClass('selected');
    }
 }

.selected {
   background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<ul id="ul">
   <li id="li-one" class="section">
      Stuff One
   </li>

   <li id="li-two" class="section">
      Stuff Two
   </li>

   <li id="li-three" class="section">
      Stuff Three
   </li>
</ul>

但是在检查期间的js脚本中查看本地存储中的值是什么，如果我将div id全部设为#li-one它就可以了。意思是 - if(ls == 3){ $('#li-one').addClass('selected') - 这是有效的，但如果是 - if(ls == 3){ $('#li-two').addClass('selected')或if(ls == 3){ $('#li-three').addClass('selected') - 这不起作用。

另外，我不能在这里得到这个例子 - 我想不允许localstorage。

非常感谢你，

塞尔吉奥

Answer 1

您可以使用解决方案https://jsfiddle.net/tdj0e5pc/2/

var ls;
 if( localStorage.getItem('3-step') == null ) {
    var ls = 1;
    localStorage.setItem('3-step', ls);
    $('#li-one').addClass('selected');
 } else {
    var ls = parseInt( localStorage.getItem('3-step') );
    if( ls == 1 ) {
       $('#li-one').addClass('selected');
    } else if ( ls == 2 ) {
       $('#li-two').addClass('selected');
    } else if ( ls == 3 ) {
       $('#li-three').addClass('selected');
    }
 }
 
 $('#ul').on('click', 'li', function(){
 	localStorage.setItem('3-step', $(this).index() + 1);
  $(this).addClass('selected').siblings('li').removeClass('selected');
 });

.selected {
   background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="ul">
   <li id="li-one" class="section">
      Stuff One
   </li>

   <li id="li-two" class="section">
      Stuff Two
   </li>

   <li id="li-three" class="section">
      Stuff Three
   </li>
</ul>

检查jsfiddle中的解决方案，因为代码段不起作用。

希望这会对你有所帮助。

JS if / else是否正常工作

1 个答案: