Tengo un nombre de clase llamado (bi bi-clipboard), quiero cambiar el nombre de la clase a (bi-clipboard-check) cuando hago clic en él, por lo que el problema es que agregó el nombre de la clase junto a la otra clase nombre como este:
antes de hacer clic:
<i class="bi bi-clipboard" onclick="changeIcon(this)"></i>Después de hacer clic:
<i class="bi bi-clipboard bi-clipboard-check" onclick="changeIcon(this)"></i>Método:
function changeIcon(icon){ icon.classList.toggle("bi-clipboard-check"); }Vi en otro lugar que estaba usando fontawesome cuando haces clic en él, la clase alterna mediante el método javascript toggle(), y funciona, pero el mío no funciona ya que dos nombres de clase están uno al lado del otro. Cualquier solución será apreciada.
si puede usar jQuery, puede alternar las clases por separado; vea la demostración de JQUERY a continuación
$(function() { $(".bi").on('click', function() { $(this).toggleClass("bi-clipboard-check"); $(this).toggleClass("bi-clipboard"); console.log($(this).prop('classList').value); }); }); .bi { height: 100px; width: 100px; display: inline-block; background-color: green; border: 1px solid red; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <i class="bi bi-clipboard"></i>O bien, puede alternar las dos clases por separado.
Vea la demostración simple de JS a continuación
function changeIcon(thisEl) { thisEl.classList.toggle("bi-clipboard-check"); thisEl.classList.toggle("bi-clipboard"); console.log(thisEl.classList.value); } .bi { height: 100px; width: 100px; display: inline-block; background-color: green; border: 1px solid red; } <i class="bi bi-clipboard" onclick="changeIcon(this)"></i>Si no quieres usar jQuery,
usando el método contains()
puede verificar si classlist contiene bi-clipboard y reemplazarlo con bi-clipboard-check y viceversa
function changeIcon(icon) { if (icon.classList.contains("bi-clipboard")) { icon.classList.replace("bi-clipboard", "bi-clipboard-check"); } else if (icon.classList.contains("bi-clipboard-check")) { icon.classList.replace("bi-clipboard-check", "bi-clipboard"); } } usando el método toggle()
function changeIcon(icon) { icon.classList.toggle("bi-clipboard-check"); icon.classList.toggle("bi-clipboard"); }