多选和限制cookie项的选择

Question

我想对该项目进行多项选择。一旦被选中，cookie 将记住它的id 并重新调用它，无论是否刷新。还能够限制选择。

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
}

小提琴：http://jsfiddle.net/k6r86/423/

Answer 1

用这个更新你的javascript。它将在当前选择之间切换并选择多个值。

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);
  });
});