Как переключать блоки типа слайдера без анимации?

Question

[idpgg]

Есть такие блоки:

<div id  = "Мороженка">мороженное</div>< div id =""пиво"> Пиво</div>   < div id ="чипсы">чипсы</div>
                                                    <div id>
                                                    <div id ="мороженкаБокс"> <li> <img id= "1" картинка мороженки> </div>
                                                    <div id ="пивоБокс"> <li>< img id="2" картинка пива> </div>
                                                    <div id ="чипсыбОКС"> <li>  <img id = "3" картинка чипсов> </div>
                                                      </div>

Надо, чтобы по клинку на document.querySelector('пиво') все остальное элементы пропадали и показывалось пиво. И так с каждой кнопкой. Кликаю на мороженку, пропадает пиво/ чипсы и показывает мороженку.
Я сделал так:
создал класс hide {display = "none" }.
Добавил при клике на кнопку "Пиво" (допустим) для всех остальных кнопках:

Мороженска.classList.add ("hide") 
 ЧипсыБокс.classList.add ("hide")
МороженкаБокс.classlist.remove ("Hide")

Клацаю на (Мороженку) classList.remoe ("hide") убираю у морожени класс и добавляю всем другим класс хайд.
Можно ли это упростить?
И еще есть 2 стрелочки Право/лево, при клике на них надо переключать эти кнопки. Как лучше сделать?

Answer 1

[Максим]

Механизм то не сложный
1) Поучаем все кнопки или ещё проще сделаем делегирование то поймаем атрибут из места куда нажали курсором то есть вот так:
e.target.getAttribute("data-class");

Дальше блок с нужным содержимым, пиво или ещё там что то совсем не важно а важно только какой class у нас будет а для декора в ручную перемешаем - я сделал так :

<div class="strawberry">Клубника</div>
  <div class="beer">Пиво</div>
  <div class="strawberry">Клубника</div>
  <div class="beer">Пиво</div>
  <div class="cherry">Вишня</div>
  <div class="beer">Пиво</div>
  <div class="cherry">Вишня</div>
  <div class="strawberry">Клубника</div>
  <div class="cherry">Вишня</div>
  <div class="strawberry">Клубника</div>
  <div class="cherry">Вишня</div>
  <div class="strawberry">Клубника</div>

После чего можно проверить условие -

если ( классблока не совпадёт с таргет и так же не all){
то добавим класс который скроет не нужные блоки
} выглядит эта строка вот так:
(!div.classList.contains(trg) && trg != "all")

И если собрать весь код вместе то получим вот такое : https://codepen.io/topicstarter/pen/QWppNzy

Comments

[idpgg]

спасибо, очень просто и работает все. буду знать как можно сделать!