Necesito ayuda con este código JavaScript, así es como quiero que se vea, el saldo estará visible y el ícono se mostrará como ícono de mostrar, y cuando se haga clic en él, el ícono cambiará para ocultar el ícono y el saldo convertirse en formato de contraseña... Aquí está mi código a continuación:
function changeIcon(anchor) { var icon = anchor.querySelector("i"); icon.classList.toggle('bx-show'); icon.classList.toggle('bx-hide'); anchor.querySelector("span").textContent = icon.classList.contains('bx-show') ? "Read more" : anchor.querySelector("span"); } <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'> <a onclick="changeIcon(this)" id="myBtn"> <i id="faPlus" class='bx bx-show'></i> <span class="SPN">Balance: $56,756.00</span> </a>Este es el resultado, al principio el saldo será visible pero cuando haga clic para ocultar y haga clic para mostrar el saldo nuevamente no será visible, esto es lo que obtuve como resultado a continuación:
[object HTMLSpanElement]Gracias
Necesita el contenido de texto del tramo, pero luego desaparece después de reemplazarlo.
También cambié la prueba ya que tenías que hacer clic dos veces en el ojo.
Le sugiero que use un atributo de datos (o alterne dos intervalos, la lectura y el saldo)
Si tiene más de uno, necesitamos delegar (ver más abajo)
function changeIcon(anchor) { var icon = anchor.querySelector("i"); icon.classList.toggle('bx-show'); icon.classList.toggle('bx-hide'); anchor.querySelector("span").textContent = icon.matches('.bx-hide') ? "Read more" : anchor.querySelector("span").dataset.text; } <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'> <a onclick="changeIcon(this)" id="myBtn"> <i id="faPlus" class='bx bx-show'></i> <span class="SPN" data-text="Balance: $56,756.00">Balance: $56,756.00</span> </a>Más de un elemento:
document.getElementById("balances").addEventListener("click",function(e) { const tgt = e.target.closest("a"); // wee can click anywhere in the anchor if (!tgt.matches(".myBtn")) return // not a button const icon = tgt.querySelector("i"); const span = tgt.querySelector("span"); icon.classList.toggle('bx-show'); icon.classList.toggle('bx-hide'); span.textContent = icon.matches('.bx-hide') ? "Read more" : span.dataset.text; }) <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'> <div id="balances"> <a class="myBtn"> <i class='bx bx-show'></i> <span class="SPN" data-text="Balance: $56,756.00">Balance: $56,756.00</span> </a> <hr/> <a class="myBtn"> <i class='bx bx-show'></i> <span class="SPN" data-text="Balance: $55,756.00">Balance: $55,756.00</span> </a> </div>Su resultado no funciona, porque intenta establecer el TextContent de su SPAN-Element en todo el elemento.
En primer lugar, debe almacenar el Saldo en una variable separada o, preferiblemente, como un atributo de datos para que el elemento específico acceda a él en cualquier momento, ya que si cambia el Contenido de texto, el valor de su Saldo se reemplaza por su cadena "Leer más" y el valor original se ha ido.
Me opondría a los siguientes cambios:
Guarde el saldo en un valor separado, para acceder al valor si desea volver a mostrar el saldo, si antes estaba oculto.
Necesitas cambiar un poco el operador ternario
He editado su código fuente a continuación con comentarios:
function changeIcon(anchor) { var icon = anchor.querySelector("i"); icon.classList.toggle('bx-show'); icon.classList.toggle('bx-hide'); // Changed the falsy state of the ternary operator to return the balance value anchor.querySelector("span").textContent = icon.classList.contains('bx-show') ? "Read more" : anchor.querySelector("span").dataset.value; } <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'> <a onclick="changeIcon(this)" id="myBtn"> <i id="faPlus" class='bx bx-show'></i> <!-- In php the line would be: <span class="SPN" data-value="<?php echo $x; ?>"><?php echo $x; ?></span> --> <span class="SPN" data-value="Balance: $56,756.00">Balance: $56,756.00</span> </a>