Не понимаю, как организовать хранение информации выделенных свойств элементов.
Я вывожу на сайт элементы, при нажатии на любой из них выводятся их дополнительные свойства, когда нажимаешь на следующий элемент эти свойства стираются и выводятся новые.
Мне нужно запоминать выбранные свойства каждого элемента, чтобы при повторном выводе они сохранялись.
Как это можно реализовать?
Выбранные свойства выделаются с помощью 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>