Page 1 sur 1

Voir plus en jQuery et PHP

Posté : 11 avr. 2013, 08:21
par rimie
Bonjour

J'ai fait un bout de code (fonction) pour afficher une phrase, si cette phrase est longue on affiche 'show more' pour lire le reste de la phrase, apres on affiche 'show less' pour revenir a l'etat normale.

Le probleme si on recupere les donnees d'une base de donnee, on clique sur "show more", toutes les donnees prennent la meme action et vice versa.

Voici le bout de code:
<html dir="rtl">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <script type="text/javascript" src="jquery.js"></script>
    
    <script>
        
        $(document).ready(function(){
        
        $("span.getMore").click(function(){ // when getMore clicked (Get More ...)
            $(this).hide(); // hide it
            $('span.complete').show(); // and show the rest of the string
        }); // end $("span.getInfo")

        $("span.getLess").click(function(){ // when getLess clicked (Get Less)
            $('span.complete').hide(); // hide the complete content (starting from Get More)
            $('span.getMore').show(); // show getMore button
        }); // end $("span.getLess")

}); // end function

</script>

</head>
    <?php
    function cutLongText($string, $maxChars)
    {
      // count chars on the string  
      $strSize = strlen($string);
      //echo $strSize.'<br />';
      
      // if total chars is bigger than maxChars
      if($strSize > $maxChars)
      {
         // cut string from 0 to maxChars
         $cutString = substr($string, 0, $maxChars);
         
         // get last space position on the cutted string (do not cut words)
		$position_espace = strrpos($cutString, ' ');    
		//echo $position_espace.'<br />';
        
        // again cut the new string from 0 to the last space
        $newString = substr($cutString, 0, $position_espace);
        
        // show the new string with get more
        echo $newString.'<span class="getMore"> Get more >>></span>';
        
        // open global span
          echo '<span class="complete" style="display: none;">';
          echo '<span>'.substr($string, $position_espace, $strSize).'</span>';
          echo '<span class="getLess"> Less</span>';
          echo '</span>';
          // close global span
      }
      else
      {
          // show the full string
          echo $string;
      } // end if($strSize > $maxChars)
   
	return $string;	
}
    
    $phrase = 'Salut! je suis une longue phrase, coupper moi :)';
    $phrase2 = 'Salut! je suis la phrase2, alors ne me laisser pas longue, coupper moi en petit morceaux :D';
    
cutLongText($phrase, 30);
echo '<br />';
cutLongText($phrase2, 30);
?>
</html>

Comment faire, pour que seulement l'element cliquee serait le seul affecte, j'ai donne un exemple
Merci a vous