Forums Développement Multimédia

Aller au contenu

Probléme bénin

CODE Ajax JQuery EaseJs

2 réponses à ce sujet

#1 @LH

    Ceinture Blanche

  • Members
  • Pip
  • 1 messages

Posté 28 February 2012 - 18:51 PM

Bonjour à tous,

Je débute en JQuery et j'ai actuelement un problème :)

Voici mon bout de code HTML :
<div id="cards">
          <a class="cards" href="#" title="card"><img src="images/btn_jaune.png"  alt="card" id="01"/></a>
          <a class="cards" href="#" title="card"><img src="images/btn_jaune.png"  alt="card" id="02"/></a>
          <a class="cards" href="#" title="card"><img src="images/btn_jaune.png"  alt="card" id="03"/></a>
           <a class="cards" href="#" title="card"><img src="images/btn_jaune.png"  alt="card" id="04"/></a>
           <a class="cards" href="#" title="card"><img src="images/btn_jaune.png"  alt="card" id="05"/></a>
           <a class="cards" href="#" title="card"><img src="images/btn_jaune.png"  alt="card" id="06"/></a>
           <a class="cards" href="#" title="card"><img src="images/btn_jaune.png"  alt="card" id="07"/></a>
                <a class="cards" href="#" title="card"><img src="images/btn_jaune.png"  alt="card" id="08"/></a>
                <a class="cards" href="#" title="card"><img src="images/btn_jaune.png"  alt="card" id="09"/></a>
                <a class="cards" href="#" title="card"><img src="images/btn_jaune.png"  alt="card" id="10"/></a>
                 <a class="cards" href="#" title="card"><img src="images/btn_jaune.png"  alt="card" id="11"/></a>
                 <a class="cards" href="#" title="card"><img src="images/btn_jaune.png"  alt="card" id="12"/></a>
                                 
  </div>

Celui JQUERY:
var DISPARITION = function(){
        return{
                init:function(){                 
                        DISPARITION.card01 = $('a#01');
                        DISPARITION.card02 = $('a#02');
                        DISPARITION.card03 = $('a#03');
                        DISPARITION.card04 = $('a#04');
                        DISPARITION.card05 = $('a#05');
                        DISPARITION.card06 = $('a#06');
                        DISPARITION.card07 = $('a#07');
                        DISPARITION.card08 = $('a#08');
                        DISPARITION.card09 = $('a#09');
                        DISPARITION.card10 = $('a#10');
                        DISPARITION.card11 = $('a#11');
                        DISPARITION.card12 = $('a#12');
                 
                        DISPARITION.ok = $('a#ok');
                 
                         $('a#01').click(function(){
                                alert('toto');
                                //DISPARITION.card02.hide('slow');
                                return false;
                        });
                }
        }
}();


J'appelle bien évidemment DISPARITION.init

Le but final étant de faire disparaitre les carte lorque l'on clique dessus
Cependant rien ne se passe même un alert
Merci d'avance :)

#2 dcz.switcher

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 2532 messages

Posté 29 February 2012 - 12:30 PM

Salut et bienvenue sur le forum mediabox.

Pour arriver à tes fins, tu pourrais simplement écouter le click sur les tag a qui portent la classe cards


$(document).ready(function() {

        $('#cards a.cards').on('click', function(e){
                $(e.target).hide() ; //masque l'élément cliqué
                return false ; //empêche le navigateur d'appliquer le comportement d'un lien cliqué
        }) ;

});

Une autre manière d'aborder le problème est de poser un écouteur sur le conteneur, ça minimise le nombre d'écouteurs posés



$(document).ready(function() {
        $('#cards').on('click', function(e){
                var $target = $( e.target ) ;
 
                //on controle si l'element a la class cards,
        //ça permet de ne pas prendre en compte les click sur la DIV
                if( $target.hasClass('cards') ){
                        $target.hide() ;
                }
 
                return false ;
}) ;
});

"Ce que l'on conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément"

embryon de site

#3 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 7012 messages

Posté 29 February 2012 - 15:32 PM

Salut,

Pour compléter ce que dit dcz.switcher (que je salue au passage).

Si tu as une structure différente entre tes éléments tu peux aussi utiliser .find : http://api.jquery.com/find/
Ce qui te permettra de cibler un élément précis dans un conteneur.



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

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

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP