javascript - Referencing HTML elements -

i looking if element referenced so, if make change 1 makes change in other. example,

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

now in jquery or js:

$("#trigger").click( function() {    $(this).addclass("animated"); // same class added elements defined in attribute. }); 

i this:

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

but not looking , convenient plus can have more main elements referenced attribute.

how can add referencing in document?

you can use class referenced elements like:

<div id="trigger" data-reference="reference_1">trigger</div>  <div id="meter" class="reference_1"></div> <div id="voltmeter" class="reference_1"></div> 

and in jquery part:

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