Tengo el nombre, el firstname y un lastname de lápiz junto a ellos en mi página web. Necesito presionar a lápiz y puedo cambiar el texto a otro. Por favor ayude a resolver este problema
aqui esta html
<a class="nav-link left-panel-txt" id="left-panel-txt" href="/profile"> <div class="sb-nav-link-icon"></div> <span class="dashboard">Firstname Lastname</span><img src="/static/img/pencil.svg" style="width: 5%; height: 5%; margin-left: 10px;"> </a>Gracias.
Esta es una demostración de lo que pediste.
Hay una etiqueta que muestra texto estático Firstname Lastname y cuando hace clic en el lápiz junto a él, tiene la oportunidad de editar ese valor hasta que vuelva a hacer clic en el lápiz y el valor sea de solo lectura.
Cambié ligeramente su html y agregué jQuery (ya que lo incluyó en sus etiquetas de preguntas) y Fontawesome para agregar un icono de un lápiz (ya que de lo contrario la imagen de su lápiz no estaría disponible).
function onToggleClick(event){ if ( $(event.target).hasClass('editing') ){ $(event.target).removeClass('editing'); $(event.target).prev('.dashboard').removeClass('editing'); $('.dashboard').attr('contenteditable', false); } else{ $(event.target).addClass('editing'); $(event.target).prev('.dashboard').addClass('editing'); $('.dashboard').attr('contenteditable', true); } } $(document).ready(()=>{ $('.edit_toggle').click(onToggleClick); }); .dashboard{ display: inline-block; border: solid 1px lightgray; padding: 2px 5px; } .dashboard.editing{ border: solid 1px black; } .edit_toggle i{ pointer-events: none; } .edit_toggle{ display: inline-block; width: 5%; height: 5%; margin-left: 10px; border: solid 1px lightgray; text-align: center; padding: 2px 2px; cursor: pointer; } .edit_toggle.editing{ background: lightgray; } <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="dashboard">Firstname Lastname</div> <div class="edit_toggle"> <i class="fa-solid fa-pencil"></i> </div>