Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.08.2018, 02:03
Аватар для Globus
Аспирант
Отправить личное сообщение для Globus Посмотреть профиль Найти все сообщения от Globus
 
Регистрация: 04.03.2014
Сообщений: 76

Как скрыть дубли?
Доброго времени суток! Подскажите пожалуйста с таким вопросом:

Есть следующий список, каждый пункт которого имеет уникальный id и неуникальный класс:

<a href="#">Скрыть дубли</a>

<ul id="list">
<li id="item1" class="clone" style="display: block;">01</li>
<li id="item2" class="clone" style="display: none;">02</li>
<li id="item3" class="clone" style="display: block;">03</li>
<li id="item4" class="box" style="display: block;">04</li>
<li id="item5" class="box" style="display: none;">05</li>
<li id="item6" class="box" style="display: none;">06</li>
<li id="item7" class="box" style="display: block;">07</li>
</ul>



Задача следующая - чтобы при нажатии на кнопку "Скрыть дубли" оставался видимым (со значением display: block) только ОДИН любой пункт из повторяющихся у каждого класса, а остальные надо скрыть (display: none)


Например, из кода выше итог получится такой:
01
02
03
04
07


А при нажатии на кнопку "Скрыть дубли" повторяющиеся классы скроются и останется видимым только один блок из каждой группы классов и итог будет такой:

01 
04


В целом скрипт получится по сути таким:
Ищем все пункты меню и собираем их в группы по классам. Проверяем, сколько в каждом классе видимых пунктов. Если более, чем у одного стоит display='block' тогда первый остается display='block', а остальные Hide. Если все скрыты, то ничего не делаем, если только один из группы открыт, то тоже ничего не делаем.

Помогите, пожалуйста, сформулировать это адекватным скриптом Или я в корне не прав с логикой и есть проще пути? Заранее спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 02.08.2018, 02:26
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

<a href="#">Скрыть дубли</a>
	<ul id="list">
		<li id="item1" class="clone" style="display: block;">01</li>
		<li id="item2" class="clone" style="display: none;">02</li>
		<li id="item3" class="clone" style="display: block;">03</li>
		<li id="item4" class="box" style="display: block;">04</li>
		<li id="item5" class="box" style="display: none;">05</li>
		<li id="item6" class="box" style="display: none;">06</li>
		<li id="item7" class="box" style="display: block;">07</li>
	</ul>

	<script>
		document.querySelector('a').onclick = e =>{
			var arr = [];
			document.querySelectorAll('#list li').forEach(el=>(!arr.includes(el.className) && el.style.display !== 'none')?arr.push(el.className):el.style.display = 'none');
		};
	</script>
Ответить с цитированием
  #3 (permalink)  
Старый 02.08.2018, 09:30
Аватар для Globus
Аспирант
Отправить личное сообщение для Globus Посмотреть профиль Найти все сообщения от Globus
 
Регистрация: 04.03.2014
Сообщений: 76

Спасибо! Такого быстрого и красивого решения не ожидал!
Ответить с цитированием
  #4 (permalink)  
Старый 02.08.2018, 10:36
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

скрыть дубли
Globus,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  li.hide {
    display: none;
  }

  </style>
  <script>
document.addEventListener("DOMContentLoaded", function() {
    document.querySelector("a").addEventListener("click", function(e) {
        e.preventDefault();
        [".clone", ".box"].forEach(function(a) {
            a = document.querySelectorAll(a);
            e = false;
            [].forEach.call(a, function(a) {
                a.classList.contains("hide") || (e ? a.classList.add("hide") : e = true)
            })
        })
    })
});
  </script>
</head>

<body>
<a href="#">Скрыть дубли</a>

<ul id="list">
<li id="item1" class="clone" >01</li>
<li id="item2" class="clone hide" >02</li>
<li id="item3" class="clone" >03</li>
<li id="item4" class="box" >04</li>
<li id="item5" class="box hide" >05</li>
<li id="item6" class="box hide" >06</li>
<li id="item7" class="box" >07</li>
</ul>

</body>

</html>

Последний раз редактировалось рони, 02.08.2018 в 10:43.
Ответить с цитированием
  #5 (permalink)  
Старый 02.08.2018, 23:36
Аватар для Globus
Аспирант
Отправить личное сообщение для Globus Посмотреть профиль Найти все сообщения от Globus
 
Регистрация: 04.03.2014
Сообщений: 76

рони, спасибо)
Ответить с цитированием
  #6 (permalink)  
Старый 03.08.2018, 00:04
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Ну и если вам нужно вернуть состояние обратно... Хотя и необязательно!

<input type="checkbox" id="duplicates-filter">
<label for="duplicates-filter">Скрыть дубли</label>
<ul id="list">
	<li id="item1" class="clone">01</li>
	<li id="item2" class="clone" hidden>02</li>
	<li id="item3" class="clone">03</li>
	<li id="item4" class="box">04</li>
	<li id="item5" class="box" hidden>05</li>
	<li id="item6" class="box" hidden>06</li>
	<li id="item7" class="box">07</li>
</ul>

<style>
#duplicates-filter:checked ~ ul .clone:not([hidden]) ~ .clone,
#duplicates-filter:checked ~ ul .box:not([hidden]) ~ .box{
	display: none;
}
</style>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как скрыть класс при повторном нажатии на главный пункт меню? dred_01 Элементы интерфейса 1 23.11.2017 22:21
Как от приложения скрыть свой ip Unity3d Оффтопик 2 24.05.2017 11:05
Как автоматически скрыть список подменю alexyarik Элементы интерфейса 0 29.11.2014 13:09
как скрыть блок div по ключевому слову Sacred13 Элементы интерфейса 6 06.08.2013 19:13
Windows Media Player - Как скрыть url потока на сайте mff Элементы интерфейса 6 01.05.2010 03:35