Всем привет, возможно вам сразу будет проще посмотреть демонстрацию кода чем читать мои устные объяснения, сам вопрос внизу этого текста. У меня есть 3 элемента. При клике у этих элементов переключаются классы(не обращайте внимания на название классов, тут важно то что классов 2 и они разные), работает это следующим образом, есть класс 'right' и 'out-left' При клике на кнопку, класс 'right' добавляется элементу-1, а класс 'out-left' элементу 2, при повторном клике класс 'right' удаляется у элемента-1, а класс 'out-left' удаляется у элемента-2, в этот же момент класс 'right' добавляется элементу-2, а класс 'out-left' добавляется элементу-3, соответственно если кликнуть ещё раз, то класс 'right' удаляется у элемента-2 и класс 'out-left' удаляется у элемента-3 и в это же время класс 'right' добавляется элементу-3, а класс 'out-left' добавляется элементу-1 и так по кругу.
Проблема в том что я это сделал максимально тупо, без возможности быстро добавить новый элемент(если его добавлять то понадобится еще много строк кода). Возможно ли как то это оптимизировать чтобы бесконечно можно было добавлять элементы? Может массив из элементов сделать и как-нибудь его перебирать и добавлять эти классы, ничего в голову не приходит. Спасибо если вдумались в мою писанину:)
let el1 = document.querySelector('.el-1');
let el2 = document.querySelector('.el-2');
let el3 = document.querySelector('.el-3');
let paintHandler = function() {
if (el3.classList.contains('out-left')) {
el3.classList.remove('out-left')
el3.classList.add('right');
el2.classList.remove('right')
el1.classList.add('out-left');
return;
}
if (!el1.classList.contains('right')){
el1.classList.remove('out-left');
el3.classList.remove('right')
el1.classList.add('right');
el2.classList.add('out-left');
return;
}
if (el1.classList.contains('right')){
el1.classList.remove('right');
el2.classList.remove('out-left');
el2.classList.add('right');
el3.classList.add('out-left');
return;
}
}
.container {
display: flex;
gap: 5px;
}
.element {
border: 4px solid black;
padding: 5px;
}
button {
margin-top: 15px;
}
.right {
background-color: red;
}
.out-left {
background-color: blue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/style.css">
<title>Slider</title>
</head>
<body>
<div class="container">
<div class="el-1 element">
<span>Элемент 1</span>
</div>
<div class="el-2 element">
<span>Элемент 2</span>
</div>
<div class="el-3 element">
<span>Элемент 3</span>
</div>
</div>
<button onclick="paintHandler()">Впёред</button>
<script src="/js/script.js"></script>
</body>
</html>