Question

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

li

有关详细信息，请参阅此http://jsfiddle.net/4pf8hsgf/3/

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

从多个获取和设置Cookie到样式多个<li>

1 个答案: