Is there a way to "link" several elements?

Suppose I have 4 visible divs:

  - 2 on top

  - 2 on the bottom, wrapped in a con开发者_如何学Gotainer

and 1 hidden div.

When a mouse hover over a bottom div it changes its color and changes color of one of the top divs.

When user clicks on a bottom div the hidden div appears and stays on the screen until mouse leave the container.

I use if statements to change color of divs, but I'm not sure whether I'm doing this right. Maybe there is a more simple and elegant way to do this.

So there are the questions:

  - Do I have to use if statement here? Maybe there is a way to somehow "link" pairs of elements to reduce the amount of code?

  - What if I want a top div to stay active while hidden div is visible? Do I need to write additional function with if statements again? Wouldn't that be "do not repeat yourself" rule violation?

Code example here: http://jsfiddle.net/Xq9kr

You can create implicit links through structure.

For example with this 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>

You can then select the respective div in the top via indices:

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

Or you can create explicit links through data attributes and IDs.

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

Then select like this:

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