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

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

引用HTML元素

3 个答案: