@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 стрелочки Право/лево, при клике на них надо переключать эти кнопки. Как лучше сделать?
  • Вопрос задан
  • 40 просмотров
Решения вопроса 1
LenovoId
@LenovoId
I want, women not to get sick
Механизм то не сложный
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
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы