1

Задача в том чтобы когда пользователь в первый раз выбрал элементы, затем когда в следующий раз он заходит на страницу те элементы которые он выбирал были уже отмеченные, я так понимаю что мне нужно после нажатия на save найти все активные элементы и сохранить их в объект а затем я их передам на backend, как правильно это сделать? Записать в объект элементы?

$(".elem").click(function() {
  $(this).toggleClass("active");
});
.elem {
  width: 100px;
  height: 100px;
  background: yellow;
  margin-bottom: 10px;
}

.elem.active {
  background: red;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="elem" data-elem="1"></div>
<div class="elem" data-elem="2"></div>
<div class="elem" data-elem="3"></div>
<div class="elem" data-elem="4"></div>
<div class="elem" data-elem="5"></div>
<button class="save">save</button>

2
  • а в куки сохранить не пойдет ? 16 сен 2017 в 14:51
  • нет, только через обьект
    – dmitriy
    16 сен 2017 в 15:05

2 ответа 2

1

let elements = '[1, 3, 4]'; // полученная с сервера строка
elements = JSON.parse(elements); // преобразовываем ее в массив
console.log(elements); // полученный массив

elements.forEach(function(elem) { // перебираем полученный массив
  $('.elem[data-elem="' + elem + '"]').addClass('active'); // и отмечаем элементы согласно значениям из массива 
});

$('#save').on('click', function() {
  elements = []; // очищаем массив
  $('.elem.active').each(function() { // для каждого выделенного элемента
    elements.push($(this).attr('data-elem')); // добавляем в массив его data-elem
  });
  elements = JSON.stringify(elements); // преобразовываем в строку
  console.log(elements); // полученная строка
});

$(".elem").click(function() {
  $(this).toggleClass("active");
});


/* Убрать выделение */
$('#reset').on('click', function() {
  $('.elem').removeClass('active');
});
.block:after {
  content: '';
  display: block;
  clear: both;
}

.elem {
  width: 100px;
  height: 100px;
  background: yellow;
  margin: 0 10px 10px 0;
  float: left;
}

.elem.active {
  background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block">
  <div class="elem" data-elem="1"></div>
  <div class="elem" data-elem="2"></div>
  <div class="elem" data-elem="3"></div>
  <div class="elem" data-elem="4"></div>
  <div class="elem" data-elem="5"></div>
</div>
<button id="save">Save</button>
<button id="reset">Reset</button>

0

Можно создать булевый массив, в котором будет храниться, активен ли соответствующий элемент или нет. Массив можно, например, преобразовать в json (JSON.stringify), получится строка, которую уже можно передать на сервер.

$(".elem").click(function() {
  $(this).toggleClass("active");
});

$('.save').click(function() {
  let array = $('.elem').toArray().map(element => $(element).hasClass('active'));
  // вот этот массив отправляете на сервер
  // для примера выведем его
  console.log(array);
});

$('.restore').click(function() {
  // получаем массив с сервера, например такой:
  let array = [false, false, true, false, true];
  let elements = $('.elem');
  array.forEach((isActive, i) => elements.eq(i).toggleClass('active', isActive));
});
.elem {
  width: 70px;
  height: 70px;
  background: yellow;
  margin-top: 10px;
  display: inline-block;
}

.elem.active {
  background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="save">save</button>
<button class="restore">restore</button>
<div>
  <div class="elem" data-elem="1"></div>
  <div class="elem" data-elem="2"></div>
  <div class="elem" data-elem="3"></div>
  <div class="elem" data-elem="4"></div>
  <div class="elem" data-elem="5"></div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.