Référencement des éléments HTML

Question

Je suis à la recherche que si certains éléments pourraient être référencés, alors, si je fais un changement à celui-ci, il change aussi dans l'autre. Par exemple,

<div id="trigger" data-referencedID="meter voltmeter ammeter vmeter">Trigger</div> 
... 
... 
<div id="meter"> 
    <!-- Its children goes here --> 
</div> 
... 
... 
<div id="voltmeter"> 
    <!-- Its children goes here --> 
</div> 
... 
... 
<div id="ammeter"> 
    <!-- Its children goes here --> 
</div> 
... 
... 
<div id="vmeter"> 
    <!-- Its children goes here --> 
</div> 

Maintenant en jQuery ou JS:

$("#trigger").click(function() { 
    $(this).addClass("animated"); // The same class will be also added to the elements defined in attribute. 
}); 

je pourrais le faire comme ceci:

$("#trigger").click(function() { 
    var a = $(this).data("referenced").split(" "); 
    for(var i = 0; i < a.length; i++) { 
     $("#"+a).addClass("animated"); 
    } 
    $(this).addClass("animated"); 
}); 

Mais ce n'est pas beau et pratique, plus je peux avoir plus éléments principaux avec attribut référencé.

Comment ajouter facilement du référencement dans mon document?

Answer 1

Vous pouvez utiliser une classe pour tous les éléments mentionnés comme:

<div id="trigger" data-reference="reference_1">Trigger</div> 

<div id="meter" class="reference_1"></div> 
<div id="voltmeter" class="reference_1"></div> 

Et dans votre partie jQuery:

$("#trigger").click(function() { 
    var e = $(this); 
    e.addClass("animated"); 
    $('.' + e.data('reference')).addClass("animated"); 
}); 

Answer 2

Que diriez-vous d'une inverse référence? Ajoutez des classes dans les compteurs qui pointent vers le déclencheur. De cette façon, vous pouvez ajouter un nombre de mètres qui référence le déclencheur:

<div id="trigger">Trigger</div> 
... 
... 
<div id="meter" class="ref-trigger"> 
    <!-- Its children goes here --> 
</div> 
... 
... 
<div id="voltmeter" class="ref-trigger"> 
    <!-- Its children goes here --> 
</div> 
... 
... 
<div id="ammeter" class="ref-trigger"> 
    <!-- Its children goes here --> 
</div> 
... 
... 
<div id="vmeter" class="ref-trigger"> 
    <!-- Its children goes here --> 
</div> 

Et changer le gestionnaire de clic pour déclencheur comme suit:

$("#trigger").click(function() { 
    $('.ref-trigger').addClass("animated"); 
}); 

Comment cela?

Answer 3

Vous pouvez utiliser un attribut sur les éléments référencés:

<div id="trigger">Trigger</div> 
... 
... 
<div id="meter" data-reference="trigger"> 
    <!-- Its children goes here --> 
</div> 
... 
... 
<div id="voltmeter" data-reference="trigger"> 
    <!-- Its children goes here --> 
</div> 
... 
... 
<div id="ammeter" data-reference="trigger"> 
    <!-- Its children goes here --> 
</div> 
... 
... 
<div id="vmeter" data-reference="trigger"> 
    <!-- Its children goes here --> 
</div> 

Et vous accéder à tous les éléments faisant référence à cette façon:

$("#trigger").click(function() { 
    $("#trigger, [data-reference=trigger]").addClass("animated"); 
}); 

Les parties du match de requête [données de référence = déclenchement] tous les éléments qui ont une référence d'attribut avec une valeur de trigger.