0

Tengo un JavaScript que abre varios enlace href="" ubicado a su vez en varios div, usando load y attr, pero no me funciona en un navegador; solamente en mi editor.

Mi HTML es así:

<!-- ubicación de enlaces -->
<div class=".ver" data-target="#yoVisor" href="Emma.html">
Ver artículo
</div>

<!-- destino de enlaces -->
<div class=".viendo"></div>

Y mi JavaScript es lo siguiente:

$(".ver").click(function(ev) {
 
 ev.preventDefault(); 
 
 $( $(this).attr("data-target") + ".viendo").load($(this).attr("href"), function() {
 
 $($(this).attr("data-target")); 
 
}
 
}

Por favor, necesito ayuda con este... Gracias

1 respuesta 1

1

JQuery no encuentra donde mostrar el nuevo contenido, porque no tienes un elemento con ID yoVisor.

Además, el punto para especificar clases aplica solo en selectores CSS, no en atributos de etiquetas; sobra el punto en <div class=".ver" data-target="#yoVisor" href="Emma.html"> y en <div class=".viendo"></div>, debiendo ser solo class="ver" o class="viendo"

Si el clic se hace en:

<div class="ver" data-target="#yoVisor" href="Emma.html">

Según lo que tienes en esta línea:

$($(this).attr("data-target") + ".viendo").load($(this).attr("href"));

El selector es #yoVisor.viendo, por lo que el elemento destino debe tener ID y clase:

<div id="yoViendo" class="viendo"></div>

Pero, como los ID son únicos, está de sobra crear el selector con ID y clase, es suficiente solo con ID:

$($(this).attr("data-target")).load($(this).attr("href"));

Omití la función (segundo parámetro de load) porque no estás ejecutando alguna acción. En caso de querer aplicar algún efecto, entonces sí es necesario agregar la función que va a ejecutarse cuando se complete la carga.

$('.ver').on('click', function(ev) {
    ev.preventDefault();
    // Ocultar elemento antes de cargar
    $($(this).attr("data-target")).fadeOut();
    $($(this).attr("data-target")).load($(this).attr("href"), function() {
        // Mostrar al finalizar la carga de nuevo contenido
        $($(this).attr("data-target")).fadeIn();
    });
});

Nota: $.click() es la forma corta de asignar eventos y se prefiere el uso de $.on().

1
  • Ok. Tuve errores al escribir el código (porque no copié). Pero algo no me cuadra: al hacer click sobre .ver, no me carga el href en el div viendo. Commented el 18 may. 2021 a las 18:09

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.