多个 select 并限制 cookie 项的 selection
Multiple select and limit the selection of cookie item
我想在商品上制作多个 select。一旦 selected,cookie 将记住它的 id
并在刷新时重新调用它。也能限制select离子。
html
<div class="seat">
<div class="ui-state-default" id="A13"><p>A</p></div>
<div class="ui-state-default" id="B13"><p>B</p></div>
<div class="ui-state-default" id="C13"><p>C</p></div>
</div>
js
$(document).ready(function() {
var index = Cookies.get('active');
$('.seat').find('p').removeClass('active');
$(".seat").find('p').eq(index).addClass('active');
$('.seat').on('click', 'p', function(e) {
e.preventDefault();
$('.seat').find('p').removeClass('active');
$(this).addClass('active');
Cookies.set('active', $('.seat p').index(this));
});
});
css
p.active {
background: #ffcc00;
border: 3px solid #333;
}
p {
background: #ccc;
display: inline-block;
border-radius: 5px;
margin: 5px;
padding: 10px;
float: left
}
fiddle : http://jsfiddle.net/k6r86/423/
用这个更新你的javascript。它将在当前 select 离子和 select 多个值之间切换。
function update(ids){
$('.seat').find('p').removeClass('active');
for(var i =0 ; i< ids.length; i++){
$(".seat").find('p').eq(parseInt(ids[i])).addClass('active');
}
}
$(document).ready(function() {
var val = Cookies.get('active');
if(val){
update(val.split(','));
}
$('.seat').on('click', 'p', function(e) {
e.preventDefault();
var ids = Cookies.get('active');
var currentIndex = $('.seat p').index(this);
if(!ids){
ids = '';
}else{
if(ids.search(currentIndex) === -1){
ids += ',' + currentIndex;
}else{
ids = ids.replace(currentIndex,'');
}
}
update(ids.split(','));
Cookies.set('active',ids);
});
});
我想在商品上制作多个 select。一旦 selected,cookie 将记住它的 id
并在刷新时重新调用它。也能限制select离子。
html
<div class="seat">
<div class="ui-state-default" id="A13"><p>A</p></div>
<div class="ui-state-default" id="B13"><p>B</p></div>
<div class="ui-state-default" id="C13"><p>C</p></div>
</div>
js
$(document).ready(function() {
var index = Cookies.get('active');
$('.seat').find('p').removeClass('active');
$(".seat").find('p').eq(index).addClass('active');
$('.seat').on('click', 'p', function(e) {
e.preventDefault();
$('.seat').find('p').removeClass('active');
$(this).addClass('active');
Cookies.set('active', $('.seat p').index(this));
});
});
css
p.active {
background: #ffcc00;
border: 3px solid #333;
}
p {
background: #ccc;
display: inline-block;
border-radius: 5px;
margin: 5px;
padding: 10px;
float: left
}
fiddle : http://jsfiddle.net/k6r86/423/
用这个更新你的javascript。它将在当前 select 离子和 select 多个值之间切换。
function update(ids){
$('.seat').find('p').removeClass('active');
for(var i =0 ; i< ids.length; i++){
$(".seat").find('p').eq(parseInt(ids[i])).addClass('active');
}
}
$(document).ready(function() {
var val = Cookies.get('active');
if(val){
update(val.split(','));
}
$('.seat').on('click', 'p', function(e) {
e.preventDefault();
var ids = Cookies.get('active');
var currentIndex = $('.seat p').index(this);
if(!ids){
ids = '';
}else{
if(ids.search(currentIndex) === -1){
ids += ',' + currentIndex;
}else{
ids = ids.replace(currentIndex,'');
}
}
update(ids.split(','));
Cookies.set('active',ids);
});
});