更改状态以刷新 Jquery 的按钮

Buttons that changes state to refresh Jquery

本文关键字：Jquery 按钮刷新状态更新时间：2023-09-26

我有这个样本：

http://jsfiddle.net/JfGVE/1017/

代码网页：

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

代码 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');
                }
        }

问题是当我单击一个按钮然后...全部为彩色刷新我想只留下那些点击的人...

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

如何解决这个问题？

提前感谢！

 
       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');
                }
            }

根据索引存储类信息。