Question

假设我有4个可见的div：
- 顶部2 - 底部2个，包裹在容器中和1个隐藏的div。

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

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

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

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

此处的代码示例：http://jsfiddle.net/Xq9kr

Answer 1

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

例如使用此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');

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

1 个答案: