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

查询的 [data-reference=trigger] 部分匹配所有具有 trigger 值的属性引用的元素。

Answer 2

您可以为所有引用的元素使用一个类，例如：

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

反向引用怎么样？在指向触发器的仪表中添加类。通过这种方式，您可以添加任意数量的引用触发器的仪表：

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

这个怎么样？