0

我正在寻找是否可以引用某些元素,如果我对一个元素进行任何更改,它也会对另一个元素进行更改。例如,

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

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

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

4

3 回答 3

0

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

<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 值的属性引用的元素。

于 2013-08-28T09:26:35.160 回答
0

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

<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");
});
于 2013-08-28T09:19:34.900 回答
0

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

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

这个怎么样?

于 2013-08-28T09:23:12.040 回答