Question

我要从php数组中提取一个雇员姓名列表，并将其显示在html页面上。单击员工名称（通过jQuery）时，其名称变为红色（通过CSS）。现在，我有一个使用localStorage的功能，因为我试图保持单击的员工在页面上刷新的红色状态，或者无论哪个用户查看该页面，但是从现在开始刷新页面时，红色字体恢复为正常如果尚未单击。

我曾尝试在jQuery函数中使用localStorage来基于从PHP数组中提取并以HTML显示的员工id＃来维护状态。

HTML / PHP

 <td>
      <span class="EmpFullName" id="<?php echo trim($data['Id']);?>"><strong>
      <?php echo $data['EmpFullName'];?></strong><br></span>
 </td>

jQuery


        $( document ).ready(function() {
        let ls = window.localStorage;
        let storeKey = 'item-clicked';

        $('.EmpFullName').click(function() {
            $(this).toggleClass('clicked');

            if(ls)
            {
                let str = ls.getItem(storeKey), arr;
                if(str)
                {
                    try{
                        arr = JSON.parse(str);
                    }
                    catch(e){
                    };
                }
                if(!Array.isArray(arr))
                {
                    arr=[];
                }

                let clicked = $(this).hasClass('clicked');
                let index = arr.indexOf(this.id);
                if(clicked)
                {
                    if(index === -1)
                    {
                        arr.push(this.id);
                    }
                }
                else
                {
                    if(index > -1)
                    {
                        arr.splice(index, -1);
                    }
                }
                ls.setItem(storeKey, JSON.stringify(arr));
            }
        });

        let str = ls ? ls.getItem(storeKey) : '';
        if(str)
        {
            let arr;
            try{
                arr = JSON.parse(str);
            }
            catch(e){
            }

            if(Array.isArray(arr))
            {
                arr.forEach(function(id)
                {
                    $('#' + id).toggleClass('clicked');
                });
            }
        }
    });

CSS

 .clicked{
        color: red;
        font-weight: bold;
    }

Answer 1

问题在于您尝试获取ID属性的方式。
this.id未定义，您应该使用$(this).attr('id')。

另外，从数组中删除元素时，应使用arr.splice(index, 1);而不是arr.splice(index, -1);，因为第二个参数表示“要删除多少个元素”。

关于常规代码样式，我建议您使用return early pattern。

localStorage在页面刷新时不维护jquery click功能的影响

1 个答案: