jQuery导航数组,寻找一个优雅的解决方案
jQuery nav arrays, looking for an elegant solution
我一直在想实现以下目标的最优雅的方法。。。
我有以下导航结构:
<div class="menu-wrap">
<ul id="smenu">
<li><a class="selected" href="#">1</a></li>
<li><a class="" href="#">2</a></li>
<li><a class="" href="#">3</a></li>
<li><a class="" href="#">4</a></li>
<li><a class="" href="#">5</a></li>
<li><a class="" href="#">6</a></li>
<li><a class="" href="#">7</a></li>
</ul>
</div>
这个div在页面的其他地方:
<div class="desc-wrap">
<p>blah blah blah</p>
<p>blah blah blah</p>
<p>blah blah blah</p>
<p>blah blah blah</p>
<p>blah blah blah</p>
<p>blah blah blah</p>
<p>blah blah blah</p>
</div>
默认情况下,p都是隐藏的;如果我点击第一个li,我希望第一个p出现,等等,很简单,对吧?我已经用了几种不同的方法,但我一直在想,我应该能够用更少的行数来完成它。
这是我的超级蹩脚的一个,添加了类名:
$("#smenu li").click(function() {
$(".desc-wrap p").hide();
});
$("li.desc-one").click(function() {
$("p.desc-one").show();
});
$("li.desc-two").click(function() {
$("p.desc-two").show();
});
$("li.desc-three").click(function() {
$("p.desc-three").show();
});
$("li.desc-four").click(function() {
$("p.desc-four").show();
});
$("li.desc-five").click(function() {
$("p.desc-five").show();
});
$("li.desc-six").click(function() {
$("p.desc-six").show();
});
$("li.desc-seven").click(function() {
$("p.desc-seven").show();
});
这是我阵列尝试的开始,但你可以看到它的发展方向:
var mappedPs = $(".desc-wrap p").map(function (index) {
if (index == 0) {
$(this).show();
}
else {
$(this).hide();
}
});
var mappedList = $("#smenu li").map(function (index) {
if (index == 0) {
$("#smenu li").click(function() {
$(mappedPs[0]).show();
});
}
else {
$(mappedPs[1,2,3,4,5,6]).hide();
}
});
我是不是错过了一些显而易见的东西?我觉得这应该比原来简单得多。。。
为什么不直接使用.index()
?
$('#smenu li').click(function(){
$('.desc-wrap p').hide().eq($(this).index()).show();
});
$('#smenu li').each(function(index) {
$(this).click(function() {
$('.desc-wrap p:eq('+index+')').show();
});
});
OR(这将隐藏任何可见的段落标签)
$('#smenu li').each(function(index) {
$(this).click(function() {
$('.desc-wrap p').hide().filter(':eq('+index+')').show();
});
});
相关文章:
- iPad虚拟键盘-哪一个-javasctript解决方案
- 如何让我的网站上的WEBP图像加载在morzilla firefox中有一个可能的解决方案吗?如果是,那么如何
- 这里有一个更优雅的/DRY/可维护的JS解决方案
- 当我想发布一个变量但有 1 个 js 时,ajax post 的解决方案是什么
- 有没有一个简单的解决方案可以根据3个数据找到结果
- 将复杂内容(想想整个网页树)从一个 Web 应用程序提供给另一个网站的最佳可重用解决方案是什么?
- 需要一个类似于“另存为”对话框的解决方案来使用 javascript 选择文件名和位置
- 需要一个优化的解决方案来获取按字母顺序排列的记录集 javascript
- 在 JavaScript 中将小数字合并为一个是个好主意吗?(作为存储优化解决方案)
- 寻找一个纯粹的Javascript函数式编程解决方案
- 未捕获的类型错误: $(..).froala编辑器不是一个函数//解决方案被找到,但不确定如何使用它
- 寻找一个交互式javascript地图解决方案,允许放大,标记和使用位图图像(不是SVG))
- 什么'这是一个很好的webrtc音频解决方案
- 淡出/淡出使DIV's堆叠而不是重叠?使用& # 39;绝对# 39;这不是一个解决方案
- 如果节点模块' body-parser '不安全,下一个解决方案是什么
- 需要一个解决方案,以增加减少字体大小的网站
- 需要一个解决方案,以阻止Safari浏览器阻止Facebook身份验证弹出框,允许用户登录到我的网站
- 为什么我的解决方案有效,而另一个解决方案无效
- 是否有一个解决方案,以获得对象直接到指令范围
- 寻找一个解决方案,作为radiobutton.click()挂Safari,但在Chrome中工作