Многократный выбор и ограничение выбора элемента 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>

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