@Popkornikus

Возможно ли упростить код?

Добрый день. Имею такую задачу, что при клике на определенную кнопку должна появляться одна таблица, а остальные три исчезать. Вроде бы все сделал и все работает, но немного напрягает 8 циклов. Возможно ли как-то упростить данный код?

HTML
<div class="row">
            <div class="col-12 btn-group btn-group-toggle">
                <ul class="hr">
                    <li><button type="button" class="btn btn-link planedBtn">Запланированно</button></li>
                    <li><button type="button" class="btn btn-link viewedBtn">Просмотренно</button></li>
                    <li><button type="button" class="btn btn-link favoriteBtn">Любимое</button></li>
                    <li><button type="button" class="btn btn-link abandonedBtn">Брошено</button></li>
                </ul>
            </div>
        </div>
        <table class="table table-bordered planed myTable" ></table>
        <table class="table table-bordered viewed myTable" ></table>
        <table class="table table-bordered favorite myTable" ></table>
        <table class="table table-bordered abandoned myTable"></table>


JS
let planedBtn = document.getElementsByClassName('planedBtn')
    let viewedBtn = document.getElementsByClassName('viewedBtn')
    let favoriteBtn = document.getElementsByClassName('favoriteBtn')
    let abandonedBtn = document.getElementsByClassName('abandonedBtn')
    let planed = document.getElementsByClassName('planed')
    let viewed = document.getElementsByClassName('viewed')
    let favorite = document.getElementsByClassName('favorite')
    let abandoned = document.getElementsByClassName('abandoned')

    for (let a = 0; a<planed.length;++a) {
        for(let b = 0; b<viewed.length; ++b) {
            for(let c=0; c<favorite.length; ++c) {
                for(let d = 0;d<abandoned.length;++d) {
                    for(let e=0;e<planedBtn.length;++e){
                        planedBtn[e].onclick = function () {
                            planed[a].style.display="block"
                            viewed[b].style.display="none"
                            favorite[c].style.display="none"
                            abandoned[d].style.display="none"
                        }
                    }
                    for(let f =0; f<viewedBtn.length;++f) {
                        viewedBtn[f].onclick = function () {
                            planed[a].style.display="none"
                            viewed[b].style.display="block"
                            favorite[c].style.display="none"
                            abandoned[d].style.display="none"
                        }
                    }
                    for(let g=0;g<favoriteBtn.length;++g){
                        favoriteBtn[g].onclick = function () {
                            planed[a].style.display="none"
                            viewed[b].style.display="none"
                            favorite[c].style.display="block"
                            abandoned[d].style.display="none"
                        }
                    }
                    for(let h=0;h<abandonedBtn.length;++h) {
                        abandonedBtn[h].onclick = function () {
                            planed[a].style.display="none"
                            viewed[b].style.display="none"
                            favorite[c].style.display="none"
                            abandoned[d].style.display="block"
                        }
                    }
                }
            }
        }
    }
  • Вопрос задан
  • 149 просмотров
Пригласить эксперта
Ответы на вопрос 3
DcFanoiD
@DcFanoiD
Full Stack : web
Тут не надо ничего упрощать, это идеальный код, достойный быть в учебниках по прикладному самоистязанию.
Ответ написан
cannibal_corpse
@cannibal_corpse
Верстальщик руками
Возможно! :)
Ответ написан
@egovar
Frontend-developer
let buttons = document.getElementsByClassName('btn');
let tables = document.getElementsByClassName('table');

for (let i=0; i buttons[i].addEventListener('click', toggleTables);
}

function toggleTables(evt) {
for(let i=0; i if (buttons[i] === evt.target) {
let targetNum = i;
}
}
for (let i = 0; i tables[i].style.display="none";
}
tables[targetNum].style.display = "table";
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
28 июл. 2021, в 12:48
500 руб./за проект
28 июл. 2021, в 12:25
50000 руб./за проект
28 июл. 2021, в 12:08
2000 руб./за проект