Я создал меню настроек текста, которое содержит группировки настроек, элементы в одной из которых могут быть активированы одновременно (gr-1), а другие выбираются поочередно и должны скрыть предыдущий пункт из их группы при их выборе.
Я хотел бы узнать как реализовать это для двух выборочных групп: первой (от gr-2 до gr-4) и второй (от gr-5 до gr-10).
Сейчас у меня уже получилось реализовать отчистку других групп при выборе одной из выборочных групп. Можете ли вы подсказать что бы мне следовало изменить в данном коде для решения проблемы?
document.addEventListener('DOMContentLoaded', function() {
// Получаем все иконки настройки
var icons = document.querySelectorAll('.settings-text img');
// Получаем все выпадающие списки настроек
var selects = document.querySelectorAll('.down-icons div');
// Функция для скрытия строк других групп настроек при выборе текущей группы
function hideOtherGroups(groupNum) {
selects.forEach(function(select) {
if (select.id !== groupNum && select.style.opacity !== 0) {
// устанавливаем прозрачность нулевой, если элемент не активный
select.style.opacity = 0;
}
});
}
icons.forEach(function(icon, index) {
icon.addEventListener('click', function() {
// определяем текущий выпадающий список
var currentSelect = selects[index];
// Определяем номер группы текущих настроек
var groupNum = currentSelect.id;
// Скрываем другие группы настроек и делаем текущую видимой
if (currentSelect.style.opacity == 0 || currentSelect.style.opacity == '') {
hideOtherGroups(groupNum);
currentSelect.style.opacity = 1;
currentSelect.style.display = 'inline-block';
} else {
// делаем текущую группу невидимой в случае повторного клика
currentSelect.style.opacity = 0;
}
});
});
});
Так же предоставляю html код для большего понимания:
<div class="settings-text">
<img src="icon/type.svg" style="margin-left: 5px" id="icon-1">
<img src="icon/type-bold.svg" id="icon-2">
<img src="icon/type-italic.svg" id="icon-3">
<img src="icon/type-underline.svg" id="icon-4">
<img src="icon/type-strikethrough.svg" id="icon-5">
<img src="icon/type-h1.svg" id="icon-6">
<img src="icon/type-h2.svg" id="icon-7">
<img src="icon/type-h3.svg" id="icon-8">
<img src="icon/code-slash.svg" id="icon-9">
<img src="icon/spellcheck.svg" id="icon-10">
<img src="icon/text-left.svg" id="icon-11">
<img src="icon/text-center.svg" id="icon-12">
<img src="icon/text-right.svg" id="icon-13">
<img src="icon/list-ul.svg" id="icon-14">
<img src="icon/list-ol.svg" id="icon-15">
<img src="icon/list-check.svg" id="icon-16">
<img src="icon/sliders2.svg" id="icon-17">
</div>
<div class="down-icons">
<div id="gr-1"></div>
<div id="gr-1"></div>
<div id="gr-1"></div>
<div id="gr-1"></div>
<div id="gr-1"></div>
<div id="gr-2"></div>
<div id="gr-3"></div>
<div id="gr-4"></div>
<div id="gr-1"></div>
<div id="gr-1"></div>
<div id="gr-5"></div>
<div id="gr-6"></div>
<div id="gr-7"></div>
<div id="gr-8"></div>
<div id="gr-9"></div>
<div id="gr-10"></div>
<div id="gr-1"></div>
</div>