使用jquery环行交叉路口一次更改2个div的内容的最佳方法是什么？
提问于 2010-04-20 09:45:52
我正在使用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);
});所以你可以看到脚本根据title数组的键改变了item-title的内容，我还想做的是在aqua处于焦点时显示aquapanel，并明显地隐藏所有其他元素(在真实的例子中有不止1个)。
我的javascript知识只带给我更多的东西：
$('#aqua').focus(function(){
$('#bluepanel').hide();
$('#aquapanel').show();
});考虑到列表中有8个或元素，我意识到这是非常不优雅和低效的。那么，有没有办法创建一个div in数组，并显示所选的数组，同时隐藏该数组中的所有其他数组？
我希望我说得很清楚，任何帮助都是非常感谢的。
回答 1
Stack Overflow用户
回答已采纳
发布于 2010-04-20 10:06:13
对于每个面板div：
- 添加一个公共类，例如“
”
- 确保id是图像id和“id=”的组合，例如"bluepanel“表示图像”id=“
然后在焦点事件处理程序(在fadeIn()之后)中添加如下内容：
$('div.panel').hide();
$('#' + $(this).attr('id') + 'panel').show();页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/2674032
复制相关文章
![[AAAI | 论文简读] GNN中非属性节点分类的优先标记](https://developer.qcloudimg.com/http-save/yehe-8259540/e5b40c95f3e5d6a1d5e84122f723e284.png)
点击加载更多
腾讯云开发者
