1

Buenas noches amigos tengo una lista donde cada item tiene un enlace que contiene un valor diferente en su propiedad href pero al momento de obtener el valor y mostrar obtengo el valor del primer elemento para todos, quisiera que me ayuden por favor.

Lo que estoy buscando es obtener el valor de un enlace de cada item seleccionado y mostrarle en un modal para que el usuario pueda ínter actuar, en este caso obtengo el valor del primer elemento cuando hago clic en cualquier elemento cave recalcar que utilizo una clase para obtener el valor y por ende se repite. Lo que deseo hacer es corregir mi código para que obtenga el valor de cada enlace de cada item utilizando una misma clase ya que sera usado en un bucle y pueden ser una infinidad de items.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <style>
        .js-info{
            margin-right: 20px;
        }
        .obtener-url{
            color: green;
            margin-left: 20px;
        }
    </style>
</head>
<body>
    <div class="bucle">
        <div class="item">
            <div class="opciones">
                <a href="javascript:void(0)" class="js-info">Clic para ver info</a>
                <a href="https://store.arte.com" class="boton-azul url-producto">ver más </a>
            </div>
        </div>
        <div class="item">
            <div class="opciones">
                <a href="javascript:void(0)" class="js-info">Clic para ver info</a>
                <a href="https://arte.com" class="boton-azul url-producto">ver más</a>
            </div>
        </div>
        <div class="item">
            <div class="opciones">
                <a href="javascript:void(0)" class="js-info">Clic para ver info</a>
                <a href="https://artesania.com" class="boton-azul url-producto">ver más</a>
            </div>
        </div>
    </div>

    <script src="jquery.min.js"></script>
    <script>
        $('.js-info').one('click', function() {
            var urlItem = $('.url-producto').attr('href');
            var plantilla = '<a href="'+urlItem+'" class="obtener-url">Datos a mostrar: '+ urlItem +'</a>';
            $(this).append(plantilla);
        });
    </script>
</body>
</html>

2 respuestas 2

1

Para dicha tarea no requieres de JQuery, deberías proceder de esta forma:

OPCIÓN 1

Para recuperar el valor de un atributo de elementos que poseen solo una clase

  • Obtienes todos los elementos que tienen la misma clase por medio de querySelectorAll()
  • Como obtuviste una lista de nodos los recorres con un forEach
  • A cada elemento recuperado en las iteraciones que sucedan le agregas un listener en el evento click
  • Ahora por cada elemento puedes acceder a su propiedad href
  • Con ese elemento recuperado ya puedes proceder a ejecutar la acción necesaria
  • El evento click tratará de redirigir al destino, dicho comportamiento lo anulamos con el uso de preventDefault
  • Una vez que obtienes el valor lo puedes mandar a un modal con HTML 5 nativo haciendo uso de la etiqueta dialog de la cual te dejo mas información

Código

let listado = document.querySelectorAll(".url-producto")

listado.forEach((elemento) => {
  elemento.addEventListener("click", (event) => {
    event.preventDefault()
    console.log(elemento.href)
  })
})

OPCIÓN 2

Para recuperar el valor de un atributo de una serie de elementos aún con clases diferentes (creo que esta es la que te conviene mas)

  • Pasamos separados por comas los elementos y sus clases asociadas de aquellos elementos que deseamos recuperar

    <!DOCTYPE html>
    <html lang="es">
    <head>
        <meta charset="UTF-8">
        <title>Demo</title>
        <style>
            .js-info{
                margin-right: 20px;
            }
            .obtener-url{
                color: green;
                margin-left: 20px;
            }
        </style>
    </head>
    <body>
        <div class="bucle">
            <div class="item">
                <div class="opciones">
                    <a href="javascript:void(0)" class="js-info">Clic para ver info</a>
                    <a href="https://store.arte.com" class="boton-azul url-producto">ver más </a>
                </div>
            </div>
            <div class="item">
                <div class="opciones">
                    <a href="javascript:void(0)" class="js-info">Clic para ver info</a>
                    <a href="https://arte.com" class="boton-azul url-producto">ver más</a>
                </div>
            </div>
            <div class="item">
                <div class="opciones">
                    <a href="javascript:void(0)" class="js-info">Clic para ver info</a>
                    <a href="https://artesania.com" class="boton-azul url-producto">ver más</a>
                </div>
            </div>
        </div>
    <script>
        let listado = document.querySelectorAll("a.url-producto, a.js-info")
        
        listado.forEach((elemento) => {
          elemento.addEventListener("click", (event) => {
            event.preventDefault()
            console.log(elemento.href)
          })
        })
    </script>

Y como notas no necesitamos a JQuery

0
0

Buenas noches amigos ya logra realizar lo que deseaba. Les comparto el código, si lo mejoran los agradezco.

var urlLista = [];

$(".bucle .url-producto").each(function(){
    var value = $(this).attr('href');
  // Agregamos nuestro valor al arreglo
  urlLista.push(value);
});

$('.js-info').each(function(indice) {
    var value = indice;

    $(this).click(function(event) {
        event.preventDefault();
        console.log(urlLista[value] );
    });
});

Tu Respuesta

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

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