Question

我正在添加添加CSS的过程，该CSS在单击时会变成红色。在jQuery函数上调用了clicked事件。单击人员名称时，我可以使字体变成红色，但是当刷新页面时，红色字体恢复正常，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>

jquery

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

使CSS和jQuery函数结果在页面刷新时持续存在

1 个答案: