Форум

Globus · #1 (**permalink**) 02.08.2018, 02:03

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

Есть следующий список, каждый пункт которого имеет уникальный 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 
04

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

Помогите, пожалуйста, сформулировать это адекватным скриптом

Или я в корне не прав с логикой и есть проще пути? Заранее спасибо!

j0hnik · #2 (**permalink**) 02.08.2018, 02:26

<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>

Globus · #3 (**permalink**) 02.08.2018, 09:30

Спасибо!

Такого быстрого и красивого решения не ожидал!

рони · #4 (**permalink**) 02.08.2018, 10:36

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>

Globus · #5 (**permalink**) 02.08.2018, 23:36

рони, спасибо)

Malleys · #6 (**permalink**) 03.08.2018, 00:04

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

<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>

Форум

Справочник

Discord чат

Курсы javascript