Get and Set Cookie from multiple to style multiple <li>答案

【问题标题】：Get and Set Cookie from multiple to style multiple <li>Get and Set Cookie from multiple to style multiple <li>
【发布时间】：2015-06-08 08:41:02
【问题描述】：

我希望当用户选择多个输入时，jQuery 应该设置一个 cookie，然后将我的类添加到特定的 li，其中 cookie 的值等于 li 的 data-id。在这件事上我需要你的帮助。

$(document).ready(function(){
    $("input").change(function() {
        if ($(this).is(':checked')) {
          createCookie(this.name, this.value, 1000);                
          $("li").filter('[data-id=' + this.value + ']').addClass('prelight');
        } else {
            $("li").filter('[data-id=' + this.value + ']').removeClass('prelight');
            eraseCookie(this.name, this.value);
        }
    });

    if (readCookie(this.name)) {
        $("li").filter('[data-id=' + this.value + ']').addClass('prelight');
        $('input').filter('[name=' + this.name + ']').attr('checked', 'checked');
    }
});

更多详情请看这个http://jsfiddle.net/4pf8hsgf/3/

【问题讨论】：

您需要将if (readCookie(this.name)) 包装成$("input")。否则它只会匹配到文档（如果有的话）
我这样做了，但仍然无法正常工作。为什么我的脚本不能正常工作！！！这是怎么回事！！！

标签： jquery css cookies input

【解决方案1】：

这是我的解决方案，我与您分享以帮助任何需要此脚本的人：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script type="text/jscript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<title>Untitled 2</title>
<style type="text/css">
.pre {
background-color:black;
padding:0.5em 1em;
color:#ccc;
}
.prelight {
background-color: yellow;
color: red;
font-weight: bold;
}
</style>

<script type="text/jscript">
function createCookie(name, value, days) {
if (days) {
    var date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    var expires = "; expires=" + date.toGMTString();
}
else var expires = "";
document.cookie = name + "=" + value + expires + "; path=/";
}

function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') c = c.substring(1, c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}

function eraseCookie(name) {
createCookie(name, "", -1);
}

$(document).ready(function(){
$("input").change(function() {
if ($(this).is(':checked')) {
    createCookie(this.name, this.value, 1000);
    $("li").filter('[data-id='+this.value+']').addClass('prelight');
} else {
   $("li").filter('[data-id='+this.value+']').removeClass('prelight');
    eraseCookie(this.name, this.value);
}
});

var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i].split('=');
for (var a = 0; a < c.length; a++) {
var m = c[a];

    $('input').filter('[name='+m+']').attr('checked', 'checked');
    $("li").filter('[data-id='+m+']').addClass('prelight');
}
}
});

</script>

</head>
<body>


<form>
<table>
    <tr>
        <td>Please choose your Favorite Pet:<br />
        <input name="Cat"  type="checkbox" value="01"/>Cat<br />
        <input name="dog"  type="checkbox" value="02" />Dog<br />
        <input name="gerbil"  type="checkbox" value="03" />Gerbil<br />
        <input name="gopher"  type="checkbox" value="04" />Gopher<br />
        </td>
    </tr>
</table>
</form>


<p>&nbsp;</p>
<p>&nbsp;</p>
<ul>
            <li class="pre" data-id="01">First li</li>
            <li class="pre" data-id="02">Second li</li>
            <li class="pre" data-id="03">Third li</li>
</ul>

</body>

</html>

【讨论】：