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

Question

[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"
                        }
                    }
                }
            }
        }
    }

Answer 1

[Ilya Olovyannikov]

Возможно! :)

Comments

[Popkornikus]

Фух, спасибо, теперь мне намного легче :)

[Ilya Olovyannikov]

Popkornikus, сделай класс .active, который будет показывать таблицу по клику на кнопку. Одним циклом перебери, что если это не таргет, то убрать класс active, иначе добавить.

[Popkornikus]

Ilya Olovyannikov, Спасибо, попробую

[Ilya Olovyannikov]

Popkornikus, https://codepen.io/Olovyannikov/pen/vYKoRqx

Answer 2

[Egor Varenik]

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";
}