Показать сообщение отдельно
  #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!
__________________
В личку только с интересными предложениями
Ответить с цитированием