11496 sujets

JavaScript, DOM et API Web HTML5

Afficher élément html (div) avec son index

Bonjour à tous.
je suis nouveau sur le forum, débutant en javascript et en jQuery.
Je viens d'as3 et tente de retrouver des choses connues et c'est pas toujours évident.

Bref, ma question :
Je souhaite modifier le fond de ma page en fonction du clic sur un bouton et d'un id correspondant.
J'ai ça (par défaut, seul le bg1 est affiché): 
<div id="background">
      <div id="bg1" ></div>
      <div id="bg2"></div>
      <div id="bg3"></div>
    </div>


et je fais ça sans succès : 

function changeBackground(id){

            $('#background > div').each(function(index){

              if(index == id){

                $('#background ).children(id).css("opacity" , "1");

              }else{

                $('#background ).children(id).css("opacity" , "0");

              }

            });

            
      }

si je veux afficher bg2, je fais 
changeBackground(2)

Je ne m'y prends pas de la bonne manière, mais malgré pas mal de temps à chercher je ne trouve pas de solution.

En vous remerciant d'avance pour votre réponse !
Modifié par yab (27 Feb 2014 - 16:14)
yab a écrit :
Bonjour à tous.
je suis nouveau sur le forum, débutant en javascript et en jQuery.
Je viens d'as3 et tente de retrouver des choses connues et c'est pas toujours évident.

Bref, ma question :
Je souhaite modifier le fond de ma page en fonction du clic sur un bouton et d'un id correspondant.
J'ai ça (par défaut, seul le bg1 est affiché): 
&lt;div id=&quot;background&quot;&gt;
      &lt;div id=&quot;bg1&quot; &gt;&lt;/div&gt;
      &lt;div id=&quot;bg2&quot;&gt;&lt;/div&gt;
      &lt;div id=&quot;bg3&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;


et je fais ça sans succès : 

function changeBackground(id){

            $('#background &gt; div').each(function(index){

              if(index == id){

                $('#background' ).children(id).css(&quot;opacity&quot; , &quot;1&quot;);

              }else{

                $('#background ').children(id).css(&quot;opacity&quot; , &quot;0&quot;);

              }

            });

            
      }

si je veux afficher bg2, je fais 
changeBackground(2)

Je ne m'y prends pas de la bonne manière, mais malgré pas mal de temps à chercher je ne trouve pas de solution.

En vous remerciant d'avance pour votre réponse !
Merci pour ta réponse,
L'idée (et j'aurais du le préciser), c'est qu'à terme, je voudrais faire un fondu (avec .animate) entre l'image en cours et la nouvelle image (mais c'est vrai que pour ça je n'ai besoin que de deux div en fait).
Mais je vais regarder du côté de className, ça peut être utile.

Ou j'ai du mal, c'est pour garder une référence à la div en cours, et pour sélectionner ma div en fonction de son index.

Mais probablement que je mélange pas mal de choses...
Effectivement,
Mais dans ce cas, pas de fondu d'une image à l'autre, mais fondu au blanc (ou a toute autre couleur), puis du blanc à la nouvelle image.
Donc moi ce que j'aimerais faire c'est avoir deux div, sélectionner celle qui est affichée, changer le background de l'autre, avec une opacité à 0, la passée au dessus et la faire apparaitre.
Je ne sais pas si je suis très clair...
Sujet clos
Aller à