• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

question-closed Zamiana ikon

Object Storage Arubacloud
0 głosów
78 wizyt
pytanie zadane 9 listopada 2023 w JavaScript przez Pawel82 Użytkownik (740 p.)
zamknięte 9 listopada 2023 przez Pawel82

Witam mam pytanie czy mozna kod napisaac lepiej, krócej?

<script>
            const getBtn = document.querySelector('.navbar-toggler');
            const getIcon = document.querySelector('.ri-menu-line');

            changeIcon = () => {
                if(getIcon.classList.contains('ri-menu-line')) {
                    getIcon.classList.remove('ri-menu-line');
                    getIcon.classList.add('ri-close-line');
                } else {
                    getIcon.classList.remove('ri-close-line');
                    getIcon.classList.add('ri-menu-line');
                }
            };

            getBtn.addEventListener('click', changeIcon);
        </script>

 

komentarz zamknięcia: Znaleziono rozwiązanie

1 odpowiedź

0 głosów
odpowiedź 9 listopada 2023 przez VBService Ekspert (254,490 p.)
wybrane 9 listopada 2023 przez Pawel82
 
Najlepsza

Próbowałeś użyć toggle

[ kod on-line ]

<style>
  button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .25rem;
  }
  button span {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: .25rem;
  }
  .ri-menu-line {
    background-image: url('https://picsum.photos/20/20?random=1');
  }
  .ri-close-line {
    background-image: url('https://picsum.photos/20/20?random=2');
  }
</style>

<button class="navbar-toggler"><span class="ri-menu-line"></span>Menu</button>

<script>
  const getBtn = document.querySelector('.navbar-toggler');
  const getIcon = document.querySelector('.ri-menu-line');

  changeIcon = () => {
    getIcon.classList.toggle('ri-menu-line');
    getIcon.classList.toggle('ri-close-line');
  };

  getBtn.addEventListener('click', changeIcon);  
</script>

lub

[ kod on-line ]

<style>
  button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .25rem;
  }
  button span {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: .25rem;
    background-image: url('https://picsum.photos/20/20?random=1');
  }
  .ri-close-line {
    background-image: url('https://picsum.photos/20/20?random=2');
  }
</style>

<button class="navbar-toggler"><span></span>Menu</button>

<script>
  const getBtn = document.querySelector('.navbar-toggler');
  const getIcon = getBtn.querySelector('span');

  changeIcon = () => {
    getIcon.classList.toggle('ri-close-line');
  };

  getBtn.addEventListener('click', changeIcon);  
</script>

lub

[ kod on-line ]

<style>
  button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .25rem;
  }
  button span {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: .25rem;
    background-image: url('https://picsum.photos/20/20?random=1');
  }
  button.ri-close-line span {
    background-image: url('https://picsum.photos/20/20?random=2');
  }
</style>

<button class="navbar-toggler"><span></span>Menu</button>

<script>
  const getBtn = document.querySelector('.navbar-toggler');
  getBtn.addEventListener('click', function() { this.classList.toggle('ri-close-line'); });  
</script>

 

1
komentarz 9 listopada 2023 przez Pawel82 Użytkownik (740 p.)
Zapomniałem o toggle. Dziękuję za przypomnienie.

Podobne pytania

0 głosów
3 odpowiedzi 255 wizyt
pytanie zadane 2 kwietnia 2019 w JavaScript przez VLeniowy Nowicjusz (190 p.)
0 głosów
1 odpowiedź 886 wizyt
pytanie zadane 31 października 2017 w JavaScript przez cyberDEV Użytkownik (780 p.)
0 głosów
1 odpowiedź 1,928 wizyt
pytanie zadane 18 lipca 2017 w JavaScript przez Alterwar Dyskutant (7,650 p.)

92,666 zapytań

141,564 odpowiedzi

320,020 komentarzy

62,032 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...