Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.01.2014, 04:54
Аспирант
Отправить личное сообщение для JustCrazy Посмотреть профиль Найти все сообщения от JustCrazy
 
Регистрация: 20.07.2012
Сообщений: 64

работа с классами
Здравствуйте. Подскажите пожалуйста способ реализации (можно на 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>

Последний раз редактировалось JustCrazy, 27.01.2014 в 05:00.
Ответить с цитированием
  #2 (permalink)  
Старый 27.01.2014, 05:22
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

$(function() {
   var abd = $('.a.b, .a.d');
   $('.c').click(function() {
      abd.fadeToggle();
   });
});
Ответить с цитированием
  #3 (permalink)  
Старый 27.01.2014, 05:47
Аспирант
Отправить личное сообщение для JustCrazy Посмотреть профиль Найти все сообщения от JustCrazy
 
Регистрация: 20.07.2012
Сообщений: 64

Это хорошо, спасибо, только я приводил утрированный пример. Классов может быть много и они назначаются в соответствии с данными из бд. И клик по классу "с" я привел для примера, а он может быть произведен по любому элементу.
Ответить с цитированием
  #4 (permalink)  
Старый 27.01.2014, 06:19
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Вариант без 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!
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #5 (permalink)  
Старый 27.01.2014, 15:57
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

Сообщение от JustCrazy
Классов может быть много и они назначаются в соответствии с данными из бд. И клик по классу "с" я привел для примера, а он может быть произведен по любому элементу.
Еще так можно: $var data = ob_get_clean(); и давай искать в $data всякие там классы-шмассы полученные из бд...
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Интересная работа для JavaScript-разработчика в Москве от 120 000 linna9 Работа 1 21.01.2014 23:59
Front-end разработчик, работа удаленная или в офисе(Нижний Новгород), фуллтайм. VadimZharko Работа 8 29.04.2013 09:03
работа менеджером georgi Работа 1 29.03.2013 14:18
Javascript фронтенд разработчик(долгосрочная, удаленная работа) cpp Работа 11 16.09.2012 12:04
Постоянная работа / Front-end / Москва kooper Работа 4 29.09.2011 22:06