2

Не понимаю, как организовать хранение информации выделенных свойств элементов.
Я вывожу на сайт элементы, при нажатии на любой из них выводятся их дополнительные свойства, когда нажимаешь на следующий элемент эти свойства стираются и выводятся новые.
Мне нужно запоминать выбранные свойства каждого элемента, чтобы при повторном выводе они сохранялись.

Как это можно реализовать?

Выбранные свойства выделаются с помощью toggleClass, при нажатии на каждое свойство я добавляю ему класс active и запоминаю в переменные ID основного элемента и ID текущего свойства.

Вот как-то так, нужно при нажатии на черный круг, если до этого у него было выбрано свойство, выделить его повторно. То есть нужно как то его хранить.

*Так же нужно будет сохранить ссылку, что бы при ее открытии были выбраны те же свойства.

$('.el').click(function(){
if($(this).hasClass('active')){
    $('.el').removeClass('active');
   } else {$('.el').removeClass('active'); $(this).toggleClass('active');}
});

$(document).ready( function(){
  $('.el').click(function(){
    id_el = $(this).attr('id');
    $(".svs").each(function(entry){
      $(this).remove();
    });

    for(var p = 1; p <= 3; p++){
      var option_id = "option_id_" + p;
        $('.option').append(
          '<div class="svs" id="' + option_id + '" key="' + id_el +'">' +
          '<img src=""></div>' );
    }
  })
})
$(document).ready( function(){
  var tlvl3 = 0
  var tlvl2 = 0
  $('.option').on('click', '.svs', function(){
      if($(this).hasClass('activesvs')){
        $('.svs').removeClass('activesvs');
      }
      else {
         $('.svs').removeClass('activesvs'); 
         $(this).toggleClass('activesvs');
      }
      id_op = $(this).attr('id');
      id_elem = $(this).attr('key');
       console.log(id_op);
        console.log(id_elem);
      });
})
.el img{
border: 10px solid;
border-radius: 100%;
}
.active img{
border: 10px solid bisque;
}

.svs img{
border: 10px solid yellow;
border-radius: 100%;
}
.activesvs img{
border: 10px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="el" id="id_1"><img src=""></div>
<div class="el" id="id_2"><img src=""></div>
<div class="el" id="id_3"><img src=""></div>
-----------------------
<div class="option"></div>

1 ответ 1

2

Создаём массив и храним выбранное в нём.
Код не менял, только добавил пару строк (новые строки снабжены комментариями сверху):

// Массив с выбранными значениями
var aSelectedProps = {};
$('.el').click(function() {
  if ($(this).hasClass('active')) {
    $('.el').removeClass('active');
  } else {
    $('.el').removeClass('active');
    $(this).toggleClass('active');
  }
});

$(document).ready(function() {
  $('.el').click(function() {
    id_el = $(this).attr('id');
    $(".svs").each(function(entry) {
      $(this).remove();
    });

    for (var p = 1; p <= 3; p++) {
      var option_id = "option_id_" + p;
      $('.option').append(
        '<div class="svs" id="' + option_id + '" key="' + id_el + '">' +
        '<img src="">');
    }
    // Если в массиве присутствует значение, тогда меняем класс, исходя из него
    if (aSelectedProps.hasOwnProperty(id_el)) {
      $('#' + aSelectedProps[id_el]).toggleClass('activesvs');
    }
  })
})
$(document).ready(function() {
  var tlvl3 = 0
  var tlvl2 = 0
  $('.option').on('click', '.svs', function() {
    if ($(this).hasClass('activesvs')) {
      $('.svs').removeClass('activesvs');
      // Удаление значения, если ничего не выбрано
      delete aSelectedProps[$(this).attr('key')];
    } else {
      $('.svs').removeClass('activesvs');
      $(this).toggleClass('activesvs');
      // Добавление/изменение выбранного значения
      aSelectedProps[$(this).attr('key')] = $(this).attr('id');
    }
    id_op = $(this).attr('id');
    id_elem = $(this).attr('key');
    console.log(id_op);
    console.log(id_elem);
  });
})
.el img {
  border: 10px solid;
  border-radius: 100%;
}

.active img {
  border: 10px solid bisque;
}

.svs img {
  border: 10px solid yellow;
  border-radius: 100%;
}

.activesvs img {
  border: 10px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="el" id="id_1"><img src=""></div>
<div class="el" id="id_2"><img src=""></div>
<div class="el" id="id_3"><img src=""></div>
-----------------------
<div class="option"></div>

1
  • Спасибо очень помог
    – user292437
    Commented 5 авг. 2018 в 14:35

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.