Mon titre jquery et PHP requête

Question

j'ai un titre jquery comme ceci:

<div class="mainGallery"> 
    <div class="main"> 
    <div class="mainDesc"> 
     <h2> </h2> 
     <a class="mainA" href="#"> </a> </div> 
    <ul class="pg"> 
     <li> 1 <a href="#" rel="Headline Title 1"></a> <span rel="Headline Lorem1 ipsum dolor sit amet"></span> 
     <p rel="images/1.jpg"></p> 
     </li> 
     <li> 2 <a href="#" rel="Headline Title 2"></a> <span rel="Headline Lorem ipsum2 dolor sit amet"></span> 
     <p rel="images/2.jpg"></p> 
     </li> 
     <li> 3 <a href="#" rel="Headline Title 3"></a> <span rel="Headline Lorem ipsum3 dolor sit amet"></span> 
     <p rel="images/3.jpg"></p> 
     </li> 
     <li> 4 <a href="#" rel="Headline Title 4"></a> <span rel="Headline Lorem ipsum4 dolor sit amet"></span> 
     <p rel="images/4.jpg"></p> 
     </li> 
    </ul> 
    </div> 
    <div class="mainImg"><img src=""/></div> 
</div> 

Mon jquery est:

$(document).ready(function(){ 
$('.pg li').click(function(){ 
    var header  = $(this).find('a').attr('rel'); 
    var desc  = $(this).find('span').attr('rel'); 
    var images  = $(this).find('p').attr('rel'); 
    $(".mainDesc h2").text(header); 
    $(".mainDesc a").text(desc); 
    $(".mainImg img").attr("src", images); 
    } 
); 
} 

); 

Tout est ok, mais lors de l'actualisation de la page, le premier élément est manqué . Je souhaite insérer une seule requête mysql dans mainDesc. Je veux le premier élément sera montré avec jquery pas mysql requête. Comment puis-je résoudre ce problème pour afficher le premier élément lorsque la page est actualisée. Merci

When page refreshed http://img59.imageshack.us/img59/9201/79025058.jpg When clicked http://img535.imageshack.us/img535/2926/25644092.jpg

Answer 1

Vous pouvez simuler un clic sur l'un des li s après la liaison de l'événement onClick, de sorte que le contenu est affiché lorsque la page est chargée. Ajouter cette après liaison l'événement click

$(".pg li:first").click(); 

Cela déclenche l'événement onClick sur le premier élément li. Pour le rendre plus rapide, vous devez également mettre en cache les éléments li afin de ne pas avoir à les rechercher deux fois. Le javascript serait alors ressembler à ceci

$(document).ready(function() { 

    $lis = $(".pg li"); 
    $lis.click(function(){ 
     var $li = $(this); 
     var $mainDesc = $(".mainDesc"); 

     var header  = $("a", $li).attr("rel"); 
     var desc  = $("span", $li).attr("rel"); 
     var images  = $("p", $li).attr("rel"); 

     $("h2", $mainDesc).html(header); 
     $("a", $mainDesc).html(desc); 
     $(".mainImg img").attr("src", images); 
    }); 
    $lis.eq(0).click(); 

}); 

Il me semble aussi que vous pouvez passer d'utiliser « mainDesc » en tant que classe d'une carte d'identité, car il semble qu'il y ait une seule mainDesc sur la page.

---

Il vous manque aussi une balise de fin </div> à la fin de votre HTML.