Javascript 有没有一种方法可以；链接“；几个要素？

假设我有4个可见div:
-2在顶部
-底部2个，用容器包裹
和1个隐藏分区

当鼠标悬停在底部div上时，它会更改其颜色并更改其中一个顶部div的颜色

当用户单击底部div时，隐藏div将出现并保持在屏幕上，直到鼠标离开容器

我使用if语句来更改div的颜色，但我不确定是否正确。也许有一种更简单、更优雅的方法可以做到这一点

所以有问题：
-我必须在这里使用if语句吗？也许有一种方法可以以某种方式“链接”元素对，以减少代码量？
-如果我想在隐藏的div可见时使顶部div保持活动状态，该怎么办？我是否需要再次使用if语句编写附加函数？这不是违反了“不要重复”规则吗

---

这里的代码示例：

您可以通过结构创建隐式链接

<div class="top">
    <div id="div1">Div 1</div>
    <div id="div2">Div 2</div>
</div>
<div class="bottom">
    <div data-for="div2">Div 2</div>
    <div data-for="div1">Div 1</div>
</div>

例如，使用此HTML：

<div class="top">
    <div>Div 1</div>
    <div>Div 2</div>
</div>
<div class="bottom">
    <div>Div 1</div>
    <div>Div 2</div>
</div>

或者您可以通过数据属性和ID创建显式链接

<div class="top">
    <div id="div1">Div 1</div>
    <div id="div2">Div 2</div>
</div>
<div class="bottom">
    <div data-for="div2">Div 2</div>
    <div data-for="div1">Div 1</div>
</div>

---

当您使用JavaScript将事件处理程序设置为一个以上元素时，您可能会考虑使用类而不是ID（Ex.<代码> $（“.MyCclass”）和 <代码> >，因为它不是有效的HTML，所以我不推荐第二种方法（如果它是可避免的，它应该在每个浏览器中工作，然后避免它）。事实上，第二种方法在HTML5中非常有效：

$('#' + $(this).attr('data-for')).toggleClass('highlight');
// Or, even better if you're using jquery-1.4.3+
$('#' + $(this).data('for')).toggleClass('highlight');