使用jquery回旋线一次更改2 div div内容的最佳方法？

Question

我使用jQuery迂回到我的网站上建立一个动画徽标 - 我想要的内容改变，当我点击每一个项目，像这样：

http://fredhq.com/projects/roundabout/demo/images/

我已经执行了JS上页面，这是工作正常，但我想知道什么是最好的方式也使另一个div在一侧改变？我遇到的问题是脚本在数组中使用字符串值，而我可能想创建不同的隐藏div，并根据单击的元素显示/隐藏。

简单的例子：

<img id="blue" src="triangle_blue.png"> 
<img id="aqua" src="triangle_aqua.png"> 

<span id="item-title"></span> 

<div id="bluepanel"> 
    Content here 
</div> 
<div id="aquapanel"> 
    Content here 
</div> 

这里是JS：

$(document).ready(function(){ 

var titles = { 
    blue: 'Superior Service', 
    aqua: 'Bill Checking & Validation' 
}; 

$('img').focus(function() 
{ 
    var useText = (typeof titles[$(this).attr('id')] != 'undefined') ? titles[$(this).attr('id')] : ''; 
    $('#item-title').html(useText).fadeIn(200); 
    }).blur(function() { 
    $('#item-title').fadeOut(100); 
}); 

所以，你可以自动柜员机看到脚本基于标题阵列的关键改变项目标题的内容，有什么我也想做的是显示Aquapanel，当水色对焦时，显然隐藏所有其他元素（实际例子中有1个以上）。

我的JavaScript知识只是真的带我尽可能：

$('#aqua').focus(function(){ 
$('#bluepanel').hide(); 
$('#aquapanel').show(); 
}); 

，我意识到这是令人难以置信的不雅，和低效的，考虑到有列表中的8个或元素。那么有没有办法创建一个div ID的数组，并显示所选的一个，同时隐藏所有其他数组？

我希望我明确这一点，并非常感谢任何帮助。

Answer 1

对于每个面板的div：

• 添加共同的类，例如“面板”
• 确保id是图像ID和“面板”的组合，例如， “bluepanel” 图像ID = “蓝色”

然后在焦点事件处理程序（在淡入后（））添加类似：

$('div.panel').hide(); 
$('#' + $(this).attr('id') + 'panel').show();