Jquery 获取Cookie并将其从多个设置为多个样式<；李>；_Jquery_Css_Cookies_Input

Jquery 获取Cookie并将其从多个设置为多个样式<；李>；

jquery css cookies input

Jquery 获取Cookie并将其从多个设置为多个样式<；李>；,jquery,css,cookies,input,Jquery,Css,Cookies,Input,我希望当用户选择多个输入时，jQuery应该设置一个cookie，然后将我的类添加到一个特定的li，其中cookie的值等于li的数据id。在这件事上我需要你的帮助 $(document).ready(function(){ $("input").change(function() { if ($(this).is(':checked')) { createCookie(this.name, this.value, 1000);

我希望当用户选择多个输入时，jQuery应该设置一个cookie，然后将我的类添加到一个特定的

li

，其中cookie的值等于

li

的

数据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');
    }
});

有关更多详细信息，请参阅此

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

 <!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>


无标题2
.预{
背景色：黑色；
填充物：0.5em 1em；
颜色：#ccc；
}
.预演{
背景颜色：黄色；
颜色：红色；
字体大小：粗体；
}
函数createCookie（名称、值、天数）{
如果（天）{
变量日期=新日期（）；
date.setTime（date.getTime（）+（天*24*60*60*1000））；
var expires=“；expires=“+date.togmString（）；
}
else var expires=“”；
document.cookie=name+“=”+value+expires+“path=/”；
}
函数readCookie（名称）{
变量nameEQ=name+“=”；
var ca=document.cookie.split（“；”）；
对于（变量i=0；i
猫

狗

沙鼠

地鼠




第一个li
第二个li
第三个li

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

 <!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>


无标题2
.预{
背景色：黑色；
填充物：0.5em 1em；
颜色：#ccc；
}
.预演{
背景颜色：黄色；
颜色：红色；
字体大小：粗体；
}
函数createCookie（名称、值、天数）{
如果（天）{
变量日期=新日期（）；
date.setTime（date.getTime（）+（天*24*60*60*1000））；
var expires=“；expires=“+date.togmString（）；
}
else var expires=“”；
document.cookie=name+“=”+value+expires+“path=/”；
}
函数readCookie（名称）{
变量nameEQ=name+“=”；
var ca=document.cookie.split（“；”）；
对于（变量i=0；i
猫

狗

沙鼠

地鼠




第一个li
第二个li
第三个li

您需要将

if（readCookie（this.name））

包装成

$（“输入”）

。否则，它将只匹配到文档（如果有），我这样做了，仍然不起作用。为什么我的脚本不正确！！！有什么问题吗！！！您需要将

if（readCookie（this.name））

包装成

$（“输入”）

。否则，它将只匹配到文档（如果有），我这样做了，仍然不起作用。为什么我的脚本不正确！！！有什么问题吗！！！您需要将

if（readCookie（this.name））

包装成

$（“输入”）

。否则，它将只匹配到文档（如果有），我这样做了，仍然不起作用。为什么我的脚本不正确！！！有什么问题吗！！！