引用HTML元素

Question

我看，如果某些元素可以被引用，那么如果我对该元素进行了任何更改，它也会在另一个元素中进行更改。例如，

<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> 

jQuery中或JS

现在：

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

我能做到这一点是这样的：

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

但它不是很好看，方便加我可以有更多的具有引用属性的主要元素。

如何在我的文档中轻松添加引用？

Answer 1

可以使用类像所有引用的元素：

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

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

而在你的jQuery部分：

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

Answer 2

如何反向引用？在指向触发器的仪表中添加班级。这样，您就可以添加任何数量也谈到触发米：

<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> 

并更改单击处理程序触发如下：

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

这个怎么样？

Answer 3

您可以参考的部件使用属性：

<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> 

然后您可以访问所有引用内容是这样的：

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

查询匹配的[数据引用=触发]部分所有具有触发值的属性引用的元素。