¡Hola de nuevo! Me alegro de que los foros vuelvan a estar en funcionamiento, y ahora quiero hacer uso de ellos, pues ya busqué por Google pero no me sale.
En fin, voy al grano. Estoy empezando con jQuery y quiero hacer que, al pinchar sobre un título, en un div de abajo se muestre la información de ese título, su foto y una descripción. Consigo que me muestre el título, pero la foto y la descripción no.
Este es el HTML:
Código HTML:
<div id="instrucciones">
<div class="paso">
<h4><a href="#">Paso 1</a></h4>
<div class="foto"><img src="i/proyectos/1/100_1267.JPG" /></div>
<p>Coge la botella, y, con el cúter, corta su parte superior, a unos 2cm desde donde empieza el tapón.</p>
</div>
<div class="paso">
<h4><a href="#">Paso 2</a></h4>
<div class="foto"><img src="i/proyectos/1/100_1268.JPG" /></div>
<p>Ahora, coge el tapón y córtale su parte superior.</p>
</div>
</div>
<div class="fle">
<h3>Foto</h3>
<div class="foto">
<img src="http://i233.photobucket.com/albums/ee218/Raulmmmm/1000544uv5.jpg" /></div>
</div>
Y este el Javascript
:
Código:
$(".paso h4").click(function (){
titulo = $(this).text();
instruccion = $(this+" + p").text();
imagen = $("this + .foto img").attr("src");
todo = '<h3>'+titulo+'</h3><div class="foto"><img src="'+imagen+'" /></div><p>'+instruccion+'</p>';
$(".dostercios .fle").html(todo);
});
Esta línea funciona:
Pero no sé cómo escribir estas líneas, porque de esta forma no funcionan:
Código:
instruccion = $(this+" + p").text();
imagen = $("this + .foto img").attr("src");
¿Alguien sabe qué puedo hacer? Hay un ejemplo online en la página que estoy haciendo,
Por tí mismo.