0

tengo un sidebar con este codigo:

<nav id="sidebar">
  <div class="sidebar-header">
    <img class="user-img" src="img/profile.jpg" alt="">
  </div>
  <ul class="list-unstyled components">
       <li class="li-solo margen-li">
         <img class="icono" src="img/home-white.svg" alt="">
         <a class="li-var contenedor-li" href="#">Vista general de la cuenta</a>

      </li>
      <li class="li-solo margen-li">
          <img class="icono" src="img/svg/tarjeta-de-credito.svg" alt="">
          <a class="li-var contenedor-li" href="#">Suscripcion</a>
      </li>
      <li class="li-solo margen-li">
         <img class="icono" src="img/svg/editar.svg" alt="">
         <a class="li-var contenedor-li" href="#">Editar Perfil</a>
       </li>
       <li class="li-solo margen-li">
         <img class="icono" src="img/svg/candado.svg" alt="">
         <a class="li-var contenedor-li" href="#">Cambiar contraseña</a>
       </li>                                      
  </ul>
</nav>

la cuestion es que necesito sacar el valor del sidebar cada ves que le doy click a uno sus anclas , no se si me recomiendan cambiar las anclas por otro tipo de etiqueta , o si existe una sacar el valor de dicho sidebar.

Pienso que seria como agregar un Value="", a cada item del sidebar pero no se como hacerlo.

Necesito el valor para despues trabajarlo en javaScript.

Gracias de antemano.

5
  • Las etiquetas que pones no tienen un valor per sé, Mejor dinos que quieres obtener, cuál de todos los atributos de todas las etiquetas que presentaste. ¿Qué es una ancla? el 30 abr. 2019 a las 1:34
  • Necesito saber si la persona le da click a Vista general o a suscripcion o a editar perfil y asi, para con ese valor tomar desiciones en javascript el 30 abr. 2019 a las 1:38
  • Usas Jquery o lo quieres con Javascript Vanilla? el 30 abr. 2019 a las 1:38
  • si utilizo jquery para sacar el valor , pero lo demas lo trabajo con js el 30 abr. 2019 a las 1:40
  • ancla = la etiqueta <a> el 30 abr. 2019 a las 1:40

1 respuesta 1

1

Te dejo un código básico documentado, espero te puedas guiar. No hay una forma "correcta de hacerlo" hay muchas formas de conseguir lo que quieres, pero con Jquery sería así por ejemplo

//Cuando el DOM haya cargado
$( () => {

//Creamos un listener para detectar el click
//Vamos a estar pendientes de .li-solo

$( document ).on( 'click', '.li-solo', function() {
  
  //Dentro de este selector existe la etiqueta <a> la buscamos
  let a_tag = $( this ).find('a');
  
  //Ahora si, podemos obtener varias cosas de este selector
  //Por ejemplo el texto
  let a_text = a_tag.text();
  
  console.log( 'Por atributo nativo: ' + a_text );
  
  //Podemos usar igual las bondades de HTML5
  //Nota que agregué al código HTML un atributo data-name
  let a_html5 = a_tag.data('name');
  console.log( 'Por HTML5: ' + a_html5 );
});

})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav id="sidebar">
  <div class="sidebar-header">
    <img class="user-img" src="img/profile.jpg" alt="">
  </div>
  <ul class="list-unstyled components">
       <li class="li-solo margen-li">
         <img class="icono" src="img/home-white.svg" alt="">
         <a class="li-var contenedor-li" data-name="vista_general" href="#">Vista general de la cuenta</a>

      </li>
      <li class="li-solo margen-li">
          <img class="icono" src="img/svg/tarjeta-de-credito.svg" alt="">
          <a class="li-var contenedor-li" data-name="suscripcion" href="#">Suscripcion</a>
      </li>
      <li class="li-solo margen-li">
         <img class="icono" src="img/svg/editar.svg" alt="">
         <a class="li-var contenedor-li" data-name="editar" href="#">Editar Perfil</a>
       </li>
       <li class="li-solo margen-li">
         <img class="icono" src="img/svg/candado.svg" alt="">
         <a class="li-var contenedor-li" data-name="cambiar_contra" href="#">Cambiar contraseña</a>
       </li>                                      
  </ul>
</nav>

3
  • en esta linea: $( document ).on( 'click', '.li-solo', function() // document seria el id de mi sidebar o asi se deja como document? el 30 abr. 2019 a las 1:53
  • document le estas pidiendo al DOM completo que este pendiente de cualquier click a li-solo el 30 abr. 2019 a las 1:57
  • muchas gracias , funciona perfectamente el 30 abr. 2019 a las 2:08

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.