有没有办法“链接”几个元素？

Question

假设我有4个可见的div：

3-2在顶部

-2在底部，包装在容器中

和1个隐藏div。

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

当用户单击底部div时，隐藏的div会出现并一直显示在屏幕上，直到鼠标离开容器。

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

所以这里有一些问题：

我必须在这里使用if语句吗？也许有一种方法可以以某种方式“链接”成对的元素来减少代码量？

如果我想让顶级div保持活动状态，而隐藏的div是可见的，该怎么办？我是否需要再次使用if语句编写额外的函数？这不是违反了“不要重复自己”的规则吗？

代码示例如下：http://jsfiddle.net/Xq9kr

Answer 1

您可以通过structure创建隐式链接。

例如，使用此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>

然后您可以通过索引在顶部选择相应的div：

$('div.bottom > div').hover(function () {
    var index = $(this).toggleClass('highlight').index();
    $('div.top > div').eq(index).toggleClass('highlight');
});

，或者您可以通过数据属性和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>

然后像这样选择：

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