Zamiana ikon

Question

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>

 

Answer 1

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>

 

Comments

Zapomniałem o toggle. Dziękuję za przypomnienie.