Tengo una etiqueta de párrafo con número init. Quiero reemplazar los números con estrellas/círculos redondos al hacer clic en el botón al lado. Además, adjunto una captura de pantalla a la que quiero aplicar el concepto (al hacer clic en el ícono del ojo, la identificación del paciente debe reemplazarse con círculos redondos y viceversa). Adjunto el código que he probado. Sus soluciones son muy importantes para mí en el aprendizaje de las cosas. AIT
ingrese la descripción de la imagen aquí
$('.hide-id').on('click', function () { $('.patient-id-content').attr('type', 'password'); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <p> <span class="patient-id-content" type="text">34324345</span> <button class="hide-id"> Hide </button> </p> </div>Entonces, su código jQuery del OP no era correcto. Tiene lo que desea como contraseña en un span y está aplicando un atributo de tipo a eso.
Si revisa MDN Docs , aprenderá que no hay un atributo de type para un intervalo, ya que los intervalos solo admiten atributos globales . El elemento input usa tanto el type: text como el type: password , consulte los documentos aquí .
Pero si desea tener el intervalo como su elemento, puede cambiar su controlador de eventos jQuery a lo siguiente: .toggleClass('hidden'); y crea una clase CSS oculta con la display: none;
$('.hide-id').on('click', function () { $('.patient-id-content').toggleClass('hidden'); }); .hidden { display: none;} <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <p> <input class="patient-id-content" type="text" value="34324345"> <button class="hide-id"> Hide </button> </p> </div>Esto es lo que necesita.
$(".hide-id").on("click", function () { var span = $(".patient-id-content"); var spanText = span.text(); if (!spanText.indexOf("*")) { $(".patient-id-content").text(span.attr("data-oldText")); return; } var starText = ""; for (let i = 0; i < spanText.length; i++) starText += "*"; $(".patient-id-content") .attr("data-oldText", spanText) .text(starText); });ejemplo de trabajo en jsfiddle: https://jsfiddle.net/ynojkf0q/
Esta es una solución simple para la funcionalidad que desea. Necesitará más estilo para que se vea exactamente como el ejemplo que proporcionó anteriormente.
HTML
<div class="container"> <p> <input class="patient-id-content" type="password" value="34324345"> <button id="pass-toggle" class="hide-id" onclick="toggleShowPassword()"> Show </button> </p> </div>JS
let passwordVisible = false; function toggleShowPassword() { let inputType = 'password'; passwordVisible = !passwordVisible; if (passwordVisible) { inputType = 'text'; $('#pass-toggle').addClass( "show-id" ).text( 'Hide' ); } else { $('#pass-toggle').removeClass( "show-id" ).text( 'Show' ); } $('.patient-id-content').attr('type', inputType);CSS
.patient-id-content { border: 0; }