Цитата:
<div class="fn_switch" data-name="12">1</div><div></div> <div class="fn_switch" data-name="17">2</div><div></div> <div class="fn_switch" data-name="32">3</div><div></div> <div class="fn_switch" data-name="15">4</div><div></div> <div class="fn_switch" data-name="99">5</div><div></div> <div class="fn_switch" data-name="120">6</div><div></div> <div class="fn_switch" data-name="112">7</div><div></div> |
Или допустим по
<div class="fn_switch" id="12">1</div><div></div> 2 <div class="fn_switch" id="17">2</div><div></div> 3 <div class="fn_switch" id="32">3</div><div></div> 4 <div class="fn_switch" id="15">4</div><div></div> 5 <div class="fn_switch" id="99">5</div><div></div> 6 <div class="fn_switch" id="120">6</div><div></div> 7 <div class="fn_switch" id="112">7</div><div></div> я могу генерировать любое уникальное число.... Ну я про то что после class="fn_switch" записывать что-то и это запоминать и выводить... |
up
|
решение как вы хотите конечно же есть, но для этого id или какой то иной тег должен быть уникальный на всем сайте, а не только на странице..
все тоже самое только надо будет запоминать все идентификаторы с классом active. |
Цитата:
Я js вообще не понимаю :( |
id будет или data-name?
|
Цитата:
|
localStorage запоминание кликнутых элементов
wisma,
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <style> .active{ background-color: red; } </style> </head> <body> <div class="fn_switch" data-name="12">1</div><div></div> <div class="fn_switch" data-name="17">2</div><div></div> <div class="fn_switch" data-name="32">3</div><div></div> <div class="fn_switch" data-name="15">4</div><div></div> <div class="fn_switch" data-name="99">5</div><div></div> <div class="fn_switch" data-name="120">6</div><div></div> <div class="fn_switch" data-name="112">7</div><div></div> <script> $(function() { var obj = JSON.parse(localStorage.getItem("obj") || "{}"); $(".fn_switch").each(function(indx, el) { var num = $(el).data("name"); $(el).click(function(e) { e.preventDefault(); $(el).toggleClass("active").next().slideToggle(300); obj[num] = $(el).hasClass("active"); localStorage.setItem("obj", JSON.stringify(obj)); }); obj[num] && $(el).addClass("active").next().slideDown(); }); }); </script> </body> </html> |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <style> .active{ background-color: red; } </style> </head> <body> <div class="fn_switch" data-name="11">1</div><div></div> <div class="fn_switch" data-name="12">2</div><div></div> <div class="fn_switch" data-name="13">3</div><div></div> <div class="fn_switch" data-name="14">4</div><div></div> <div class="fn_switch" data-name="15">5</div><div></div> <div class="fn_switch" data-name="16">6</div><div></div> <div class="fn_switch" data-name="17">7</div><div></div> <script> $(function(){ $('.fn_switch').click(function(e){ e.preventDefault(); $(this).next().slideToggle(300); if ($(this).hasClass('active')) { $(this).removeClass('active'); } else { $(this).addClass('active'); } var arr = $.map($('.fn_switch'), function(el, i){ if($(el).hasClass('active')) return $(el).attr('data-name'); }); localStorage.setItem('a', JSON.stringify(arr)); }); $('.fn_switch').filter(function(i){ return JSON.parse(localStorage.getItem('a')).includes($(this).attr('data-name')); }).addClass('active').next().show(); }); </script> </body> </html> </script> </body> </html> |
j0hnik,
не работает ... возможно мои браузеры устарели :lol: |
Часовой пояс GMT +3, время: 04:39. |