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 &amp; 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);
 });

所以你可以看到脚本根据titles数组的键改变了item-title的内容，我还想做的是当aqua聚焦时显示aquapanel，并且显然隐藏了所有其他元素（实际例子中有1个以上。）

我的javascript知识真的只需要我：

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

考虑到列表中有8个或元素，我意识到这是非常不优雅和低效的。那么有没有办法创建div id数组，并显示所选的那个，同时隐藏该数组中的所有其他？

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

Answer 1

对于每个小组div：

添加一个公共类，例如“面板”
确保ID是图片ID和“面板”的组合，例如“bluepanel”for image id =“blue”

然后在焦点事件处理程序中（在fadeIn（）之后）添加如下内容：

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

使用jquery环形交叉口一次更改2个div的内容的最佳方法？

1 个答案: