php - 使 CSS 和 jQuery 函数结果在页面刷新时保持不变

Question

我正在添加添加 css 的过程，单击它时字体会变成红色。 clicked 事件在 jQuery 函数上被调用。单击一个人的名字时，我可以使字体变成红色，但是当我刷新页面时，红色字体恢复正常并且 css/jQuery 不再工作。有人能帮我弄清楚如何使 css/jQuery 即使在页面刷新时仍然存在。我想让红色字体只有在用户再次点击它时才会恢复正常。

HTML/PHP

<td>
  <span id="nameSpan" class="EmpName"><strong>
       //Pulling in the name I want to click on
       <?php echo $data['EmpName']; ?></strong></span>
</td>

j查询

$( document ).ready(function() {
  $('.EmpName').click(function() {
       $(this).toggleClass('clicked');
  });
});

CSS

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

Answer 1

您需要使用 localStorage/cookies 来存储值。这是使用 localStorage 的示例。

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

    $('.EmpName').on('click', function() {
        $(this).toggleClass('clicked');

        if(ls)
        {
            var clicked = $(this).hasClass('clicked');
            ls.setItem(storeKey, clicked ? 1 : 0);
        }
    });

    var clicked = ls ? parseInt(ls.getItem(storeKey)) === 1 : false;
    if(clicked)
    {
        $('.EmpName').trigger('click');
    }
});