solo estoy tratando de agregar o eliminar una clase para un ícono usando bootstrap.
Sé que mi código es malo y necesito mejorarlo, esta es la razón por la que pido su ayuda. Sé que se puede reducir usando esto, pero no sé cómo hacerlo con el nombre de las clases.
Aquí está mi código:
heart = document.getElementById('heart'); chart = document.getElementById('chart'); heart.addEventListener('click', function(){ if(heart.classList.contains('bi-heart-fill')){ heart.classList.add('bi-heart'); heart.classList.remove('bi-heart-fill'); heart.style.color='white'; } else{ heart.classList.add('bi-heart-fill'); heart.classList.remove('bi-heart'); heart.style.color='#1DB954'; } }) chart.addEventListener('click', function(){ if(chart.classList.contains('bi-bar-chart-fill')){ chart.classList.add('bi-bar-chart'); chart.classList.remove('bi-bar-chart-fill'); chart.style.color='white'; } else{ chart.classList.add('bi-bar-chart-fill'); chart.classList.remove('bi-bar-chart'); chart.style.color='#1DB954'; } })Gracias !
Una gran parte de la programación es D on't R epeat Yourself (DRY).
En su caso, puede crear fácilmente una función que cambie las clases. Todo lo que tienes que hacer es pasar los parámetros correctos.
heart = document.getElementById('heart'); chart = document.getElementById('chart'); function toggleIcon(element, activeClass, inactiveClass) { if (element.classList.contains(activeClass)) { element.classList.add(inactiveClass); element.classList.remove(activeClass); element.style.color = 'white'; } else { element.classList.add(activeClass); element.classList.remove(inactiveClass); element.style.color = '#1DB954'; } } heart.addEventListener('click', function() { toggleIcon(heart, 'bi-heart-fill', 'bi-heart'); }) chart.addEventListener('click', function() { toggleIcon(chart, 'bi-bar-chart-fill', 'bi-bar-chart'); })Una forma concisa de arreglar esto es usando element.classList.toggle :
heart.addEventListener('click', function(){ heart.classList.toggle('bi-heart-fill'); heart.classList.toggle('bi-heart'); heart.style.color = heart.classList.contains('bi-heart') ? 'white': '#1DB954' }) chart.addEventListener('click', function(){ chart.classList.toggle('bi-bar-chart-fill'); chart.classList.toggle('bi-bar-chart'); chart.style.color = chart.classList.contains('bi-bar-chart') ? 'white': '#1DB954' })Si puede agregar algo de CSS, puede hacerlo aún más eficiente.
#heart { color: white; } #heart.black { color: #1DB954; }después
heart.addEventListener('click', function(){ heart.classList.toggle('bi-heart-fill'); heart.classList.toggle('bi-heart'); heart.classList.toggle('black'); })