Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.08.2018, 11:47
Новичок на форуме
Отправить личное сообщение для Speculant Посмотреть профиль Найти все сообщения от Speculant
 
Регистрация: 03.08.2012
Сообщений: 8

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



Выбранные свойства выделаются с помощью toggleClass, при нажатии на каждое свойство я запоминаю в переменные ид основного элемента и ид свойства
Ответить с цитированием
  #2 (permalink)  
Старый 05.08.2018, 12:56
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Speculant,
Ответить с цитированием
  #3 (permalink)  
Старый 05.08.2018, 13:02
Новичок на форуме
Отправить личное сообщение для Speculant Посмотреть профиль Найти все сообщения от Speculant
 
Регистрация: 03.08.2012
Сообщений: 8

рони,
?
Ответить с цитированием
  #4 (permalink)  
Старый 05.08.2018, 13:10
Новичок на форуме
Отправить личное сообщение для Speculant Посмотреть профиль Найти все сообщения от Speculant
 
Регистрация: 03.08.2012
Сообщений: 8

Вот что есть сейчас, нужно запоминать выбор свойств(то что под чертой) при повторном нажании на элемент
https://codepen.io/Speculant/pen/MBBeZb
Ответить с цитированием
  #5 (permalink)  
Старый 05.08.2018, 13:11
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Speculant,
ок
Ответить с цитированием
  #6 (permalink)  
Старый 05.08.2018, 14:42
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Speculant,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <style type="text/css">
.el, .svs{
    height: 20px;
    width: 20px;
    border-radius: 100%;
    background-color: #000000;
    margin-bottom: 5px;
}
.el.active {
background-color:bisque;
}

.svs{
background-color: yellow;
}
.svs.active{
background-color: red;
}
  </style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function() {
    var el = $(".el"),
        opt = $(".option"),
        k = 3,
        temp;
    for (var i = 0; i < k; i++) $('<div class="svs" ><img src=""></div>').appendTo(opt);
    temp = $(".svs", opt).detach();
    el.click(function() {
        var elem = $(this);
        el.not(elem.toggleClass("active")).removeClass("active");
        if (elem.is(".active")) {
            var key = elem.data("key");
            temp.appendTo(opt).removeClass("active");
            if (key != void 0) temp.eq(key).addClass("active")
        } else temp.detach()
    });
    opt.on("click", ".svs", function() {
        var elem = $(this);
        var key = elem.index();
        temp.not($(this).toggleClass("active")).removeClass("active");
        var block = el.filter(".active");
        if (elem.is(".active")) block.data({
            key: key
        });
        else block.removeData("key");
        show();
    })
   function show()
   {
    var data = $.map(el, function(elem) {
        var key = $(elem).data("key");
        return key != void 0 ? key : "no"
   });
   $('.out').html(JSON.stringify(data, null, 4))
   }
});
</script>
</head>

<body>
<div class="el" ><img src=""></div>
<div class="el" ><img src=""></div>
<div class="el" ><img src=""></div>
-----------------------
<div class="option"></div>
<div class="out"></div>

</body>

</html>
Ответить с цитированием
  #7 (permalink)  
Старый 05.08.2018, 15:06
Новичок на форуме
Отправить личное сообщение для Speculant Посмотреть профиль Найти все сообщения от Speculant
 
Регистрация: 03.08.2012
Сообщений: 8

рони,
Вау, огромное спасибо
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Мотоциклисты есть? l-liava-l Оффтопик 13 04.07.2014 13:35
Управление скроллом "а-ля тач" HonesT Элементы интерфейса 2 27.08.2013 14:25
как сделать что бы при открытии страницы сразу открылось большое фото oksanaweb Общие вопросы Javascript 1 05.06.2013 02:17
Как сделать что бы при регистрации человека на моем сайте у него не появлялось... drunkwolfs Общие вопросы Javascript 2 07.08.2012 10:58
Как при чтении или записи свойства объекта вызывать функцию danik.js Общие вопросы Javascript 3 16.09.2010 17:57