引用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"); 
}); 

查詢匹配的[數據引用=觸發]部分所有具有觸發值的屬性引用的元素。