Добавить класс в один тег <i>с помощью setTimeout - PullRequest
Новая
       0

Добавить класс в один тег <i>с помощью setTimeout

0 голосов
/ 14 марта 2020

Я пытаюсь найти ответ на свой вопрос, но я почти уверен, что задаю Google неверный вопрос. У меня есть такой код: 

<div class="icons">
  <i class="fas fa-sun iconDisp active-icon"></i>
  <i class="fas fa-cloud iconDisp"></i>
  <i class="fas fa-cloud-sun-rain iconDisp "></i>
  <i class="fas fa-cloud-moon iconDisp"></i>
  <i class="fas fa-cloud-showers-heavy iconDisp "></i>
</div>

Теперь моя проблема в том, что я хочу отобразить только один значок с активным классом. Я пытался сделать это с помощью «if» и манипуляций с DOM, но мои результаты были очень плохими, каждый раз, когда класс добавлялся ко всем элементам, у которых нет активного класса.

Так что я попробовал что-то подобное : 

const iconsLoader = document.querySelectorAll('.iconDisp');

const activeIcon = function (){
  if(!iconsLoader.classList.contains('active')) {
    iconsLoader.classList.add('active')
  } 
}

Может быть, в activeIcon должно быть al oop, которое проходит через все теги или что-то в этом роде

Ответы [ 2 ]

0 голосов
/ 14 марта 2020

Этот код может вам помочь. 

const icons = document.querySelectorAll('.iconDisp');

function removeClass() {
  Array.from(icons).map(icon=>{
    icon.classList.remove("active-icon");
});
}

Array.from(icons).map(icon=>{
    icon.addEventListener("click",(e)=>{
    setTimeout(()=>{
    removeClass();
    e.target.classList.add("active-icon");
    },500);
  })
});
i.iconDisp {
  transition: all .2s ease-in-out;
  color: black;
  font-size:12px;
} 
i.iconDisp.active-icon {
  color: red;
  font-size:20px;
} 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
</head>
<body>
  <div class="icons">
  <i class="fas fa-sun iconDisp"></i>
  <i class="fas fa-cloud iconDisp"></i>
  <i class="fas fa-cloud-sun-rain iconDisp "></i>
  <i class="fas fa-cloud-moon iconDisp"></i>
  <i class="fas fa-cloud-showers-heavy iconDisp "></i>
</div>
</body>
</html>
0 голосов
/ 14 марта 2020

Сначала скройте все ваши значки, затем вручную добавьте класс active-icon к одному из них. 

.iconDisp { display: none; }
.active-icon { display: block; }

В вашем JavaScript вам нужно будет добавить прослушиватель событий для каждого значка по порядку. изменить активную вкладку при нажатии. Внутри этого слушателя вы проверяете, что текущий щелчок НЕ является активной вкладкой, если это не активная вкладка, то вы удаляете класс active-icon из текущей активной и меняете его на новый активный значок. Примерно так: 

const icons = document.querySelectorAll('.icons i');
icons.forEach((icon) => {
  icon.addEventListener('click', (event) => {
    if(!icon.classList.contains('active-icon') {
      setTimeout(() => {
        const currentActiveIcon = document.querySelector('.active-icon');
        currentActiveIcon.classList.remove('active-icon');
        icon.classList.add('active-icon');
      }, 1000); // happens after 1 second
    }
  })
})

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...