работа с классами
Здравствуйте. Подскажите пожалуйста способ реализации (можно на jquery):
есть у меня определенное количество элементов с классом "а", из них несколько имеют класс "b", другие несколько класс "с", остальные класс "d" <div class="a b">text 1 b</div> <div class="a b">text 2 b</div> <div class="a c">text 1 c</div> <div class="a c">text 2 c</div> <div class="a c">text 3 c</div> <div class="a d">text 1 d</div> вопрос такой, как при клике на определенный класс (допустим "c") скрыть все элементы с другими классами? и получить результат: <div class="a c">text 1 c</div> <div class="a c">text 2 c</div> <div class="a c">text 3 c</div> а при повторном клике, вернуть все на свои места <div class="a b">text 1 b</div> <div class="a b">text 2 b</div> <div class="a c">text 1 c</div> <div class="a c">text 2 c</div> <div class="a c">text 3 c</div> <div class="a d">text 1 d</div> |
$(function() { var abd = $('.a.b, .a.d'); $('.c').click(function() { abd.fadeToggle(); }); }); |
Это хорошо, спасибо, только я приводил утрированный пример. Классов может быть много и они назначаются в соответствии с данными из бд. И клик по классу "с" я привел для примера, а он может быть произведен по любому элементу.
|
Вариант без jQuery:
<div class="a b">text 1 b</div> <div class="a b">text 2 b</div> <div class="a c">text 1 c</div> <div class="a c">text 2 c</div> <div class="a c">text 3 c</div> <div class="a d">text 1 d</div> <script> (function(){ function hasClasses(element, classList) { return classList.every(function(className) { return element.classList.contains(className); }); } var activeFilter = null; var items = Array.apply(this, document.querySelectorAll('.a')); var onItemClick = function() { var classList = Array.apply(this, this.classList); var filter = classList.join(' '); var restore = filter === activeFilter; items.forEach(function(item){ item.style.display = restore || hasClasses(item, classList) ? '' : 'none'; }); activeFilter = restore ? null : filter; }; items.forEach(function(item){ item.addEventListener('click', onItemClick); }); })(); </script> Требует поддержки ES5 и classList! |
Цитата:
|
Часовой пояс GMT +3, время: 05:54. |