Question

我正在尝试调整我们用来存储的一些代码，如果在cookie中选中了复选框，那么当页面刷新时它会记住哪些框被选中或未选中。问题是我试图存储的新元素现在不是一个复选框，它基本上是一个图标，其中有一个类（'选中'）打开或关闭，旁边放置一个复选标记。这是切换功能：

//share - add class and check on click
$('.share-actions li a').click(function(e) {
    e.preventDefault();
    $(this).toggleClass('selected');
});

这是我想要改编的cookie：

var $checkboxes;

// set the cookie
function setcookie() {
    var options= $checkboxes.map(function() {
        if (this.checked) return this.name;
    }).get().join(',');

    $.cookie('new_cookie', options);
}

$(function() {
    $checkboxes = $('input:checkbox').change(setcookie);
});

var alreadySetCookies = $.cookie('new_cookie').split(',');

for (var $cookie in alreadySetCookies) {
    $("input[name='" + alreadySetCookies[$cookie] + "']").attr("checked", "checked");
}

Answer 1

检测是否存在selected类而不是已检查状态。只需对原始代码进行最少的更改。

事件处理程序：

$('.share-actions li a').click(function(e) {
    e.preventDefault();

    $(this).toggleClass('selected');
    setcookie();
});

一般cookie获取/设置代码：

var $checkboxes = $('.share-actions li a');

function setcookie() {
    var options = $checkboxes.map(function() {
        if ($(this).hasClass('selected')) return $(this).attr('id');
    }).get().join(',');

    $.cookie('new_cookie', options);
}

var alreadySetCookies = $.cookie('new_cookie').split(',');

alreadySetCookies.forEach(function(id) {
    $("#" + id).addClass('selected');
});

每个“复选框”都需要一个唯一的ID才能生效：

<ul class="share-actions">
    <li><a href="#" id="facebook">Facebook</a></li>
    <li><a href="#" id="twitter">Twitter</a></li>
    <li><a href="#" id="instagram">Instagram</a></li>
</ul>

如何存储元素是否被选中，以便页面在刷新时记住它？

1 个答案: