Question

我有这个样本：

代码HTML：

<i class="fa fa-circle-o circle crad" id="radio"></i>
<i class="fa fa-circle-o circle crad" id="radio"></i>
<i class="fa fa-circle-o circle crad" id="radio"></i>
<i class="fa fa-circle-o circle crad" id="radio"></i>
<i class="fa fa-circle-o circle crad" id="radio"></i>

CODE JS：

 var firstButtonObject = localStorage.getItem('class');
       if(firstButtonObject){
            $('.crad').addClass(firstButtonObject);       
       }

       $('.crad').click(taskFunction);
       function taskFunction(){
             if ( $( this ).hasClass( "fa-circle" ) ) {
                  $( this ).removeClass('fa-circle').addClass('fa-circle-o');
                   localStorage.setItem('class', 'fa-circle-o');
             }else{
                  $(this).removeClass('fa-circle-o').addClass('fa-circle');
                  localStorage.setItem('class', 'fa-circle');
                }
        }

问题是，当我点击一个按钮然后......所有都是彩色刷新我想留下那些点击的人......

例如，如果我点击5的3个按钮只是一个整圆3

我该如何解决这个问题？

提前致谢！

Answer 1

 
       var defineClass = '';
            $('.crad').each(function( index){
               defineClass = localStorage.getItem('class' + index);
               $(this).addClass(defineClass)
            
            });      
       
   
       $('.crad').click(taskFunction);
       function taskFunction(){
             if ( $( this ).hasClass( "fa-circle" ) ) {
                  $( this ).removeClass('fa-circle').addClass('fa-circle-o');
                   localStorage.setItem('class' + $(this).index(), 'fa-circle-o');
             }else{
                  $(this).removeClass('fa-circle-o').addClass('fa-circle');
                  localStorage.setItem('class'+$(this).index(), 'fa-circle');
                }
            }

根据索引方式存储课程信息。

更改状态以刷新Jquery

1 个答案: