Javascript 引用HTML元素

我想知道，如果某个元素可以被引用，那么，如果我对其中一个元素做了任何更改，它也会对另一个元素进行更改。比如说,

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

我可以这样做：

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

$（“#触发器”）。单击（函数（）{
变量a=$（此）.data（“引用”）.split（“”）；
对于（变量i=0；i

但它不好看，也不方便，而且我可以有更多的带有引用属性的主元素

---

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

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

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

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

---

倒过来怎么样？在仪表中添加指向触发器的类。通过这种方式，您可以添加任意数量的仪表，这些仪表与触发器有关：

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

---

这怎么样？

您可以在引用的元素上使用属性：

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

---

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

使用Knockout:@fatman I将查看它。谢谢；）似乎很有帮助。

参考

不是一个好方法。但是你可以用一个。

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

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