Как реализовать display: block по событию onclick одному div и при этом всем раннее открытым из 36 штук — display: none на чистом js?

Question

[ReActor Дмитрий Вершанский]

Есть 37 div'ов:

<div id="ranging_1" class="ranging_1">
  ... еще много дочерних элементов разного типа ...
</div>
<div id="ranging_2" class="ranging_2">
  ... еще много дочерних элементов разного типа ...
</div>
<div id="ranging_3" class="ranging_3">
  ... еще много дочерних элементов разного типа ...
</div>

и так далее с шагом +1 по индексам id до 37-ого включительно

Есть 37 элементов меню:

<a class="selector" href="#" onclick="openRanging_1()">Клац</a>
<a class="selector" href="#" onclick="openRanging_2()">Клац</a>
<a class="selector" href="#" onclick="openRanging_3()">Клац</a>

Все 37 div'ов предварительно скрыты средствами css, конкретнее scss препроцессором циклом @for:

@for $i from 1 through 37 {
        .ranging_#{$i} {
            display: none;
       }
}

ЗАДАЧА: По клику на конкретный элемент меню - присваивать соответствующему div - display: block, тем самым показав его и всё его содержимое, и одновременно с этим закрывать раннее открытый из возможных 36 штук div.

мой JS:
Перепробовал много вариантов, не могу достичь результата, даже не вижу смысла перечислять что именно я пробовал, скажу только то, что все 37 div'ов я получил через:

var ranging_1 = document.getElementById('ranging_1');
var ranging_1 = document.getElementById('ranging_2');
var ranging_1 = document.getElementById('ranging_3');

Далее сформировал массив из этих переменных:

var arrayRanging = [ranging_1, ranging_2, ranging_3, ranging_4, ranging_5, ranging_6, ranging_7, ranging_8, ranging_9, ranging_10, ranging_11, ranging_12, ranging_13, ranging_14, ranging_15, ranging_16, ranging_17, ranging_18, ranging_19, ranging_20, ranging_21, ranging_22, ranging_23, ranging_24, ranging_25, ranging_26, ranging_27, ranging_28, ranging_29, ranging_30, ranging_31, ranging_32, ranging_33, ranging_34, ranging_35, ranging_36, ranging_37];

И теперь я в тупике...

function openRanging_1() {
    arrayRanging[0].style.display = 'block';
        for (var i = 0; i <= arrayRanging.length; i++) {
            arrayRanging[i].style.display = 'none';
        } 
}

function openRanging_2() {
    arrayRanging[1].style.display = 'block';
        for (var i = 0; i <= arrayRanging.length; i++) {
            arrayRanging[i].style.display = 'none';
        } 
}

function openRanging_3() {
    arrayRanging[2].style.display = 'block';
        for (var i = 0; i <= arrayRanging.length; i++) {
            arrayRanging[i].style.display = 'none';
        } 
}

Comments

[ⓒⓢⓢ]

что-то не так с описанием. В стилях вы прячете блоки по классу

.ranging_#{$i} {
display: none;
}

а в вёрстке эти генерированные классы не используете.

Скорее всего планировалось блоки прятать по идентификатору и в цикле стилей ошибка?
Но тогда почему бы не использовать единый класс "ranging" - не понятно

[ReActor Дмитрий Вершанский]

Вовсе нет! Посмотрите внимательнее пожалуйста. У каждого из 37 родительских блоков есть содержимое (дочерние элементы) и это содержимое само собой разное по контенту, стили для элементов я реализовал естественно через селектор КЛАССА .ranging - это в коде не отражено, не имеет причастности к вопросу, а скрытие посредством display: none; делается обращаясь к идентиффикаторам каждого div в цикле @for. Генерятся не классы, а айдишники

[ReActor Дмитрий Вершанский]

JRK_DV, Вы на 100% правы, прошу прощения, окуляры замылились!) Да - "#" вместо "." должна быть как минимум.

[ReActor Дмитрий Вершанский]

JRK_DV, у вас есть возможность дать свой вариант? Ни один пока работать не хочет, а корректировку классов сейчас проведу в самом вопросе-изложении (скрытие элементов на практике делаю именно по классам

[ⓒⓢⓢ]

Дмитрий, по мне так все ответы годные, что-то добавить не вижу смысла. На одном остановитесь и подпилите под себя. Пример от 0xD34F в действии:
https://codepen.io/anon/pen/PLXjaa
будет работать при условии, что одинаковое количество div и элементов меню

Answer 1

[0xD34F]

Разные классы не нужны, достаточно одного общего:

.ranging {
  display: none;
}

.ranging.opened {
  display: block;
}

При клике смотрим индекс нажатой кнопки, обходим элементы с контентом, выставляем класс в зависимости от равенства текущего индекса индексу кнопки:

const buttonSelector = '.selector';
const contentSelector = '.ranging';
const activeClass = 'opened';
const toggleContent = (contents, index) =>
  contents.forEach((n, i) => n.classList.toggle(activeClass, i === index));


// делегирование, назначаем обработчик клика один раз для всех кнопок
// наверное, у них есть какой-то общий предок, тогда вместо документа
// вешать обработчик следует на него:
// document.querySelector('селектор_контейнера_с_кнопками').addEventListener(...
document.addEventListener('click', e => {
  const button = e.target.closest(buttonSelector);
  if (button) {
    const buttons = document.querySelectorAll(buttonSelector);
    const index = Array.prototype.indexOf.call(buttons, button);
    toggleContent(document.querySelectorAll(contentSelector), index);
  }
});

// или, назначаем обработчик клика индивидуально каждой кнопке
const onClick = function(e) {
  toggleContent(this, +e.currentTarget.dataset.index);
}.bind(document.querySelectorAll(contentSelector));

document.querySelectorAll(buttonSelector).forEach((n, i) => {
  n.dataset.index = i;
  n.addEventListener('click', onClick);
});

Comments

[Islam Ibakaev]

а поддержка браузеров какая?

[0xD34F]

Очевидно, в ie работать не будет - spread, arrow function, forEach у NodeList, второй аргумент для classList.toggle.

[Islam Ibakaev]

0xD34F, очевидно, ваше решение не катит, до тех пор, пока автор не решит подключить babel в свой workflow. Да и обходить каждый ranging нет нужды, поскольку в любой момент времени у нас только один из них открыт, а все другие скрыты.

[0xD34F]

Islam Ibakaev, всё-таки "катит". Использование/неиспользование babel - проблема не моя, да и переписать код так, чтобы не было необходимости использовать babel - задача тривиальная.

"Нет нужды" - ну да, ну да. Открыли Америку.

Answer 2

[Игорь]

Если надо без классов

<div id="ranging_1" class="ranging">
    ... еще много дочерних элементов разного типа ...
  </div>
  <div id="ranging_2" class="ranging">
    ... еще много дочерних элементов разного типа ...
  </div>
  <div id="ranging_3" class="ranging">
    ... еще много дочерних элементов разного типа ...
  </div>

  ...

  <a class="selector" href="#" data-rating-id='ranging_1'>Клац</a>
  <a class="selector" href="#" data-rating-id='ranging_2'>Клац</a>
  <a class="selector" href="#" data-rating-id='ranging_3'>Клац</a>

var rangings = [].slice.call(document.querySelectorAll('.ranging'));
var selectors = [].slice.call(document.querySelectorAll('.selector'));
selectors.forEach(function(selector) {
  selector.addEventListener('click', function(e) {
    e.preventDefault();
    var ranging = document.getElementById(e.target.dataset.ratingId);
    ranging.style.display = '';
    rangings.forEach(function(item) {
      if (item.id !== e.target.dataset.ratingId) {
        item.style.display = 'none';
      }
    })
  });
})

Comments

[ReActor Дмитрий Вершанский]

Я верно понимаю, что мой раннее созданный массив var arrayRanging = [...], а также события onclick вообще не нужны? Интегрировал ваш код, атрибуты data-rating-n - проставил - результата нет к сожалению( Где-то я не допетриваю, видимо

[Игорь]

Да, я привел вариант сразу готового js, без вашего в примере.

1. Возможно в моем примере data-rating-id, а вы поставили data-raging-id, в таком случае надо "ratingId" поменять на "ragingId".
2. вам нужно попробовать на каждой вложенности выводить консоль лог переменных и смотреть ответ. Если код не заработал, то скорей всего в консоле будут ошибки.

К сожалению без проверки самого кода в браузере не могу вам подсказать что делать дальше.

Answer 3

[pannat]

Мой вариант - https://codepen.io/Pannat/pen/ywGJXW

Comments

[ReActor Дмитрий Вершанский]

Не совсем понятно каким образом обеспечена связка конкретная кнопка --> конкретный div, ведь ЗАДАЧА: По клику на конкретный элемент меню - присваивать соответствующему div - display: block, тем самым показав его и всё его содержимое, и одновременно с этим закрывать раннее открытый из возможных 36 штук div.

[pannat]

Дмитрий, исходим из того, что каждая кнопка соответствует своему диву и в разметке все расположено по порядку. Таким образом, у нас получается два массива, в котором соответствующие элементы расположены под одинаковыми индексами. При клике на кнопку, диву с таким же индексом как у этой кнопки присваивается класс opened.
Тут подробнее про forEach - https://learn.javascript.ru/array-iteration
Демку обновила, постаралась сделать нагляднее - https://codepen.io/Pannat/pen/ywGJXW

Answer 4

[ReActor Дмитрий Вершанский]

Решил все таки самостоятельно, инструкцией которой хотел и исходя из своего положения вещей: массив / события и так далее:

function clickInfo() {
    for(var i = 0; i <= arrayRanging.length; i++) {
        arrayRanging[i].style.display = 'none';
        arrayRanging[17].style.display = 'block';
    }
}

Неработоспособность кода была выявлена, из-за присутствия атрибута для асинхронной загрузки этого скрипта:
<script src="js/open_rubrics.js" async></script>

поменял на
<script src="js/open_rubrics.js" defer></script>

Всем большое спасибо за ваши варианты!

Answer 5

[Islam Ibakaev]

<div class="ranging-box">
<div id="ranging_1" class="ranging js-ranging">
  ... еще много дочерних элементов разного типа ...
</div>

<div id="ranging_1" class="ranging js-ranging d-none">
  ... еще много дочерних элементов разного типа ...
</div>

</div>

<div id="selectorList" class="selector-list">
<a class="selector js-selector-active" href="#ranging_1">Клац</a>
<a class="selector" href="#ranging_2">Клац</a>
</div>

.d-none { display: none; }

document.getElementById('selectorList').addEventListener('click', function(e) {
    if(e.target.nodeType === "A") {
        var activeSelector = document.querySelector('.js-selector-active');
        document.getElementById(e.target.href).className -= " d-none";
        document.getElementById(activeSelector.href).className += " d-none";
        activeSelector.className -= " js-selector-active";
        e.target.className += " js-active-selector";
    }
})

p.s. примерно как-то так, возможно где-то ошибся в синтаксисе, писал сходу и в спешке.