acceder al mismo div desde diferentes links?

[FDA]

Hola,
tengo unas noticias en una base de datos que saco con php, en un principio solo muestro los titulos, la foto de portada y los resumenes.

Consigo que si hago click en el titulo me salga la noticia entera donde quiero y que al volver a clickar o darle a cerrar se cierre. Hasta aquí todo bien.

Lo que no consigo (de hecho no se si se puede) es poder clickar en el titulo o en la imagen indistintamente y que se expanda la noticia entera. Cuando le doy a la imagen me sale el # en la url pero no hace nada.
Otra opcion que habia pensado era meterlo todo en un div y que al clickar ese div (en qualquier parte, así se incluye el titulo, la foto y el resumen) se muestre la noticia.

Os pongo el codigo de esa parte.

Código Javascript:

$(function(){
    $("#mostrar1").click(function(event) {
    event.preventDefault();
    $("#caixanew1").slideToggle();
});
$("#caixanew1 a").click(function(event) {
    event.preventDefault();
    $("#caixanew1").slideUp();
});
 

(caixanew i mostrar)
Hay 5 elementos numerados (caixanew i mostrar) pq listo las noticias de 5 en 5, todas con el mismo codigo. En el php le indico cual es cual.

Código PHP:

$i=1;
    $resultats=mysql_query("SELECT newid FROM news");
    while($row=mysql_fetch_array($resultats))
    {
        
        $nid=$row[newid];
        $result2=mysql_query("SELECT ruta,nom FROM fotonews WHERE newid=$nid");
    
        echo '<h2>';
 
        echo "<a href=\"#\" id=\"mostrar".$i."\">";
 
        echo "$row[titol]";
        echo "</a>";
        echo "</h2><br /><p>";
        
        while($row2=mysql_fetch_array($result2))
        {   
            echo "<a href=\"#\" id=\"mostrar".$i."\">";
            echo "<img src=".$row2['ruta']." />";
            echo "</a>";    
        }
 
        echo "$row[resum]"; 
        echo "</p><br /><br />autor: ";
        echo "$row[autor]";
        echo " | ";
        echo "$row[data]";
        echo " | ";
        
        $tema2=mysql_query("SELECT * FROM tema_news WHERE temaid=$row[tema]");
        while ($row=mysql_fetch_array($tema2))
        {
            echo "$row[apartat]";
        }
            
        echo "<div id=\"caixanew".$i."\">";
        
            $result=mysql_query("SELECT * FROM news WHERE newid='$nid'");
            while($row2=mysql_fetch_array($result))
            {
                echo "$row2[article]"; 
                echo "<a href=\"#\" class=\"close\">Tancar [x]</a>";
            }
        
        echo "</div>";
  
        $i=$i+1;
    }
 

Grácias!

[Rosencrantz]

En respuesta a tu pregunta sobre ejecutar una serie de rutinas al clickear (o ejecutar otro evento) en diferentes elementos dentro de una pagina se hace con la funcion trigger que se usa de la siguiente manera

Código PHP:

  //Hacemos click en un titulo para que suceda algo
 
$('#tituloNoticia_1').click(function(){
    $('#cuerpoNoticia_1').load('noticias/noticia_1.php?=idNoticia=1');
    return false;
});
 
// Al hacer click en la imagen debe suceder exactamente lo mismo que si hicieramos click sobre el mismo titulo, no repetimos el codigo hacemos lo sigueinte
 
$('#imagenNoticia_1').click(function(){
    $('#tituloNoticia_1').trigger('click');
    return false;
}); 
   

Lo que hicimos fue "disparar" el evento click del titulo al hacer click en la imagen, si es eso a lo que te refieres.

Saludos.

[FDA]

no se si termino de pillarlo...

Eso no cargaria otra pagina?
Esque lo que quiero no es cargar otra pàgina, sino mostrar el div "caixanews" que está dentro de la pàgina y ya lo ha cargado.

Si hace lo que busco, donde lo meto? pq no veo como interactua con el script que tengo.

[Rosencrantz]

Quizas algo como esto, supongo que donde tenias mostrar1 era el titulo?

Código Javascript:

//Para el titulo
      $(function(){
          $("#titulo_1").click(function(event) {
          event.preventDefault();
          $("#caixanew1").slideToggle();
      });
 
//Para la imagen: se ejecuta el evento del titulo
      $("#foto_1").click(function(event) {
          event.preventDefault();
          $("#titulo_1").trigger('click);
      });
 

[FDA]

ya funciona!!!!!!

he ido siguiendo tu razonamiento.... pero parece k seguia sin gustarle, así k he hecho una prueba a lo directo, en lugar de un trigger hago otro slideToogle() desde la foto llamando a su caixanew correspondiente.

Código Javascript:

$("#foto1").click(function(event) {
    event.preventDefault();
    $("#caixanew1").slideToggle();
    });
 

Grácias por tu tiempo!!!

[Rosencrantz]

Iniciado por FDA

ya funciona!!!!!!

he ido siguiendo tu razonamiento.... pero parece k seguia sin gustarle, así k he hecho una prueba a lo directo, en lugar de un trigger hago otro slideToogle() desde la foto llamando a su caixanew correspondiente.

Código Javascript:

$("#foto1").click(function(event) {
    event.preventDefault();
    $("#caixanew1").slideToggle();
    });
 

Grácias por tu tiempo!!!

jaja si en esencia era lo mismo hacerlo con el trigger o repetir el codigo, te apunte lo del trigger porque es muy util en situaciones donde se requieren acciones más complejas y con mas lineas de codigo, en este caso una sola linea de codigo no importa mucho.

Me alegro que te haya servido, saludos.

[Dany_s]

si los 2 clicks en los 2 elementos hacen lo mismo no hace falta repetir código, solo seleccionar los 2 elementos

Código Javascript:

$(function(){
          $("#titulo_1, #foto_1").click(function(event) {
          event.preventDefault();
          $("#caixanew1").slideToggle();
      });
 

ahora me imagino que para mostrar cada una de las noticias estarás repitiendo todo el mismo código, te conviene usar un contenedor para manejarte con los elemetos dentro de el cuando hacen click
algo como:

Código HTML:

<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
$(function(){
 
      $(".noticia img, .noticia a").click(function(event) {
          $(this).closest('.noticia').find('p').slideToggle();
          return false;
      });
 
});
</script>
  <style>
    p{display:none}
  </style>
</head>
<body>
 
    <div class="noticia">
        <img src="http://www.elmostrador.cl/media/2009/12/planeta-tierra-desde-el-espacio_50x50.jpg">
        <a href="#">Título 1</a>
        <p>1 Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    </div>
 
    <div class="noticia">
        <img src="http://www.elmostrador.cl/media/2009/12/planeta-tierra-desde-el-espacio_50x50.jpg">
        <a href="#">Título 2</a>
        <p>2 Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    </div>
 
    <div class="noticia">
        <img src="http://www.elmostrador.cl/media/2009/12/planeta-tierra-desde-el-espacio_50x50.jpg">
        <a href="#">Título 3</a>
        <p>3 Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    </div>
 
    <div class="noticia">
        <img src="http://www.elmostrador.cl/media/2009/12/planeta-tierra-desde-el-espacio_50x50.jpg">
        <a href="#">Título 4</a>
        <p>4 Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    </div>
 
    <div class="noticia">
        <img src="http://www.elmostrador.cl/media/2009/12/planeta-tierra-desde-el-espacio_50x50.jpg">
        <a href="#">Título 5</a>
        <p>5 Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    </div>
 
</body>
</html>
 

o sea, cuando hacen click en el link o la imagen subo hasta el contenedor con class noticias y desde ahi busco el párrafo