Forums Développement Multimédia

Aller au contenu

Problème de synthaxe javascript

CODE Ajax JQuery EaseJs

7 réponses à ce sujet

#1 mexandre

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 2425 messages

Posté 30 November 2012 - 11:34 AM

Bonjour à tous
J'ai un problème très simple d'incrémentation de variable qui je pense vient du ciblage de celle-ci. Etant habitué à l'AS, j'ai du mal à trouver la bonne synthaxe :


for (j=1;j<5;j++) {
  var my = j;
  $('#link' + j).on('click', function() {
   glisse (my);
   });
}
 

Et le code de la fonction glisse ()

function glisse (part) {

  //Action sur le clic de souris quand le menu est haut
  for (i=1;i<5;i++) {
        //Les menus se baissent
        var mav = i;
         $("#link" + i).animate({
        top: "335px",
        height:"150px"
         }, 300+(i*70), function() {
          $("#part" + part).fadeIn("slow");
         });
  }

}

J'ai bien la première partie de l'animation, en revanche le oncomplete n'affiche que l'id #part4 sur les 4 boutons.

Je pense que le problème vient de l'incrémentation de la variable my, mais je ne connais pas la bonne synthaxe pour la faire passer. Si quelqu'un à la solution, ça m'aiderait bien. Merci.

#2 metaroid

    Ceinture Orange

  • Members
  • PipPipPip
  • 37 messages

Posté 30 November 2012 - 13:31 PM

Salut,

Une petite question, dans ta fonction glisse, est-ce qu'au final les variables "i" et "part" sont de valeurs équivalentes ?

#3 mexandre

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 2425 messages

Posté 30 November 2012 - 14:22 PM

Oui, le problème, c'est que je n'arrive pas à l'implémenter pour le fadeIn.

#4 metaroid

    Ceinture Orange

  • Members
  • PipPipPip
  • 37 messages

Posté 30 November 2012 - 14:44 PM

Tu utilises jQuery ?
J'ai essayé de me faire un exemple en imaginant ce que tu voulais faire, je suis peut être allé trop loin du coup ... mais c'est peut être une piste, dis-moi si c'est la bonne voie .. ? (on adaptera).

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>test</title>
<style>
*{font-family:Arial;}
#part1,#part2,#part3,#part4{display:none;}
a:hover{cursor:pointer;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
</head>
<body>
<ul>
<li><a class="link" id="link1">lien 1</a>
<div id="part1">hjbfkl jbkljbf lkjdslfjs</div>
</li>
<li><a class="link" id="link2">lien 2</a>
<div id="part2">lkhyjop kdj qjkjfr q</div>
</li>
<li><a class="link" id="link3">lien 3</a>
<div id="part3">arzshj rgktjeuojcn</div>
</li>
<li><a class="link" id="link4">lien 4</a>
<div id="part4">bnhjf etpaiuzj epe </div>
</li>
</ul>
<script>
$(document).ready(function(){
var tabLink = new Array();// dernier clic stocké
$(".link").each(function(j){
  $(this).toggle(function() { glisse(j+1,"on"); },function(){ glisse(j+1,"off"); });
})
function glisse (part,bool) {
  var itemLink = "#link"+part;
  var itemPart = "#part"+part;
  if(bool=="on"){
   if(tabLink.length>0){
    $(tabLink[0][0]).animate({top: "0",height:"20px"});
    $(tabLink[0][1]).fadeOut("slow");
    tabLink.pop();
    tabLink.push([itemLink,itemPart]);
   }else{
    tabLink.push([itemLink,itemPart]);
   }
   $("#link"+part).animate({top: "335px",height:"150px"});
   $("#part"+part).fadeIn("slow");
  }else{
   $("#link"+part).animate({top: "0",height:"20px"});
   $("#part"+part).fadeOut("slow");
  }
}
});
</script>
</body>
</html>
 

... désolé, quelques soucis ..

#5 mexandre

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 2425 messages

Posté 30 November 2012 - 15:03 PM

Oui, j'utilises jquery. En fait, c'est un site que j'avais fait sous flash que j'essaye de transposer sous jquery pour me faire la main.
Pas mal l'utilisation du toggle, c'est vrai que c'est une autre option à laquelle je n'avais pas pensé, mais elle ne fonctionnera pas en l'état sur ce que je veux faire car dans ton code, tu fais revenir chaque #link à sa position d'origine, alors qu'en fait c'est un plus compliqué :
http://www.rcng.fr/new

Néanmoins j'aimerais savoir pourquoi je n'arrive pas à implémenter ma variable i dans toute la boucle et uniquement sur le premier niveau. Y-a-t'il une déclaration spécifique pour que l'on puisse implémenter les éléments descendants ?

#6 metaroid

    Ceinture Orange

  • Members
  • PipPipPip
  • 37 messages

Posté 30 November 2012 - 15:19 PM

T'as variable "my" est au premier niveau donc global, une fois ta première boucle terminée "my" est toujours égale à 4 , enfin je crois. As-tu moyen de mettre une classe "link" à tes liens et de faire plutôt un each directement en jQuery ?


$(".link").each(function(j){
$(this).on('click', function() { glisse (j+1); });
})
 


#7 dcz.switcher

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 2533 messages

Posté 30 November 2012 - 16:07 PM

Salut,

Tu pourrais aussi utiliser un attribut sur chaque "link" pour déterminer la valeur à passer à la fonction glisse.

exemple :

<li class="link" id="link1" style="top: 0px; height: 300px;" data-glisse='1'>
        <span>Le Club</span>
        <br><br>
</li>
 

et dans le JS

$('#menu').on('click', '.link', function(e){
        var glisseVal = $(this).data('glisse') ;
        console.log(glisseVal);
        glisse( glisseVal);
});
 

Je n'ai pas testé, mais ça devrait passer je pense ...

edit : si tu laisses un #id sur les balises .link, tu peux aussi récupérer le dernier caractère de l'#id
"Ce que l'on conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément"

embryon de site

#8 mexandre

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 2425 messages

Posté 30 November 2012 - 18:12 PM

@metaroid : normalement la variable change à chaque fois que la valeur i augmenet et incrémente donc les évênements. Enfin, c'est comme ça que je faisais sous AS ou php. Enfin bon je creuserai plus tard, je m'aperçois juste qu'il y a des méthodes plus simples que vous m'avez données qui semblent fonctionner, je vais creuser ça.

En tout cas, merci à vous 2, ça prouve qu'il faut que j'aborde différemment jquery car il y a des évênements que je ne connais pas et qui sont bien pratiques. Je me contentais de transposer ce que je faisais sous as.



1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)