Trigger javascript

freestyler17
Javascript

Salut a tous voila j'ai par exemple

<div class="test">
                                        <span id="1" class="star_1" index="1"></span>
                                        <span id="2" class="star_2 str" index="2"></span>
                                        <span id="3" class="star_3 str" index="3"></span>
                                        <span id="4" class="star_4 str" index="4"></span>
                                        <span id="5" class="star_5 str" index="5"></span>
                                    </div>

mon but c'est de déclancher un event CLICK sur toute les spans qui ont la class str lorsque je clique sur la premiere span sa veux dire execute 5 events click en même temps avec javascript. Merci :)

14 réponses

Vallyan
Réponse acceptée

Evidement que tu as une valeur 1 dans ta console: tu la mets avant l'appel a la fonction sur tes .str.
Essaye ceci:

$('#1').click(function(e){
    e.preventDefault();
    $('.str').each(function(){
        console.log($(this).attr('index'));
        $(this).trigger('click');
    });
});
MrGuillou
Réponse acceptée

Test avec un each en effet. Bizarre que le trigger jQuery ne s'applique pas par défaut sur l’ensemble des éléments ciblés. Dans la doc il n'ont aucun exemple sur un ciblage multiple, dommage !

Je suis pas contre les id, mais placer un id pour tout et n importe quoi n'est pas une solution. Dans son cas, le test pourrait être un id.
Sur des gros projet te retrouver avec des dev qui placent des id ('form','menu','start','error' ....) est simplement une calamité. Un id est la vraiment pour une structure unique pouvant très bien avoir des enfants. Et il doit être unique.
En effet la sélection de classe est plus longue, mais tant que tu places un minium d'id dans la structure de ton site, et que tu gardes dans des variables les éléments DOM souvent ciblés avec jQuery, le problème du temps d’exécution reste vraiment un faut problème si tu respectes un minimum les règles de programmation.

Vallyan

Bah un truc comme ca, non ?

$('#1').click(function(e){
    e.preventDefault();
    $('.str').each(function(){
        $(this).trigger('click');
    });
});

Et faudra vérifier, mais je suis même pas sur qu'il soit nécessaire de mettre un .each()

MrGuillou

En effet pas besoin du each. Attention dans les normes w3c, un id ne peut commencer par un chiffre et doit être unique.

Un petit exemple avec beaucoup moins d'id. A tester, mais normalement fonctionne

<div class="test">
    <span class="star_1" index="1"></span>
    <span class="star_2 str" index="2"></span>
    <span class="star_3 str" index="3"></span>
    <span class="star_4 str" index="4"></span>
    <span class="star_5 str" index="5"></span>
</div>
<script type="text/javascript">
$('.test span:eq(0)').click(function(e){
    $(".test .str").trigger('click');
});
</script>
Vallyan

Alors je suis bien d'accord pour l'ID qui commence par un nombre, mais par contre je suis curieux de savoir pourquoi tu veux virer les ID ? D'autant que d'un point de vu performance jQuery il vaut mieux travailler avec des ID qu'avec des classes, je crois bien (je parle du class='test', notamment) ... Et pourquoi mettre des index alors qu'ils sont implicites ?

freestyler17
Auteur

tout d'abord je veux vous remercie :) j'ai testé ce code :

$('#1').click(function(e){
    console.log($(this).attr('index'));
        $(".test .str").trigger('click');
    });

j'ai obtenu une seul résultat par contre moi je veux 5 out put.

Vallyan

t'as essayé avec le each ?
Et par output tu veux dire click triggered sur tes '.str', ou logs dans la console ?

freestyler17
Auteur

vallyan oui j'ai tester avec each :

$('#1').click(function(e){
    e.preventDefault();
    console.log($(this).attr('index'));
    $('.str').each(function(){
        $(this).trigger('click');
    });
});

sur la console j'ai une valeur 1, moi je suis intéresser par :
1
2
3
4
5

freestyler17
Auteur

Vallyan Oui ça marche merci bcp j'ai verifier le trigger aussi ça fnctionne merci encore

Vallyan

Pas de pb, bonne continuation !

Vallyan

Merci Guillou pour tes commentaires ...
Du coup tu conseillerais un sélecteur qui utilises un ID et ses enfants, plutôt que de mettre directement une classe a tous les gamins ?

Lotfi Berrahal

Bonsoir

pour le coup où tu veux "généraliser" ton effet et pas seulement l'appliquer au clic sur la 1ere div, tu peux utiliser siblings de jquery qui consiste à appliquer un effet sur les fréres et soeur de l'élément actif.
exemple dans l'hypothèse ou tout tes div ont la classe 'str'.

$('.str').click(function(e){
    e.preventDefault();
    $('.str').siblings.each(function(){
        console.log($(this).attr('index'));
        $(this).trigger('click');
    });
});

J'ai pas testé mais je pense que ça peut le faire et ça ne se limiterais pas à un seul élément.
Bref pour le cas où ça t’intéresse ! :)

Vallyan

En l'occurence ce serait plutot (ligne 3 de ton code)

$(this).siblings() ...

au lieu de 

$('.str').siblings() ...

$('.str') retourne 4 elements du DOM, et pour chacun d'eux: siblings() va encore retourner les 3 autres éléments ... ce qui ferait 12 déclanchements de 'click'

Lotfi Berrahal

oui carrément lol merci pour la relecture du code !
faut j’arrête d'écrire du javascript si tard moi ! :)