它可以按我想要的方式工作，但是我写的方式
$("#navItem1").on('click', function(){
$('#content-wrap1').hide();
$('#content-wrap2').hide();
$('#content-wrap3').hide();
$('#content-wrap4').hide();
$('#content-wrap5').hide();
$('#content-wrap1').fadeIn(1000);
});
$("#navItem2").on('click', function(){
$('#content-wrap1').hide();
$('#content-wrap2').hide();
$('#content-wrap3').hide();
$('#content-wrap4').hide();
$('#content-wrap5').hide();
$('#content-wrap2').fadeIn(1000);
});
$("#navItem3").on('click', function(){
$('#content-wrap1').hide();
$('#content-wrap2').hide();
$('#content-wrap3').hide();
$('#content-wrap4').hide();
$('#content-wrap5').hide();
$('#content-wrap3').fadeIn(1000);
});
$("#navItem4").on('click', function(){
$('#content-wrap1').hide();
$('#content-wrap2').hide();
$('#content-wrap3').hide();
$('#content-wrap4').hide();
$('#content-wrap5').hide();
$('#content-wrap4').fadeIn(1000);
});
$("#navItem5").on('click', function(){
$('#content-wrap1').hide();
$('#content-wrap2').hide();
$('#content-wrap3').hide();
$('#content-wrap4').hide();
$('#content-wrap5').hide();
$('#content-wrap5').fadeIn(1000);
});
function fadeInFirstContent(){
$('#content-wrap1').fadeIn(1000);
}
fadeInFirstContent();
这是一个jfiddle
我该如何重写jQuery，使其完全相同但是用更少的代码？
#1 楼
也许更改HTML：Navitem：
<span class="navItem" data-content-id="1"></span>
内容
<div id="content-wrap1" class="content-wrap"></div>
jQuery
$('.navItem').on('click',function(){
$('.content-wrap').hide();
$('#content-wrap'+$(this).data('content-id')).fadeIn(1000);
});
评论
\ $ \ begingroup \ $
这比使用ID的子字符串好得多。另外，您还缺少。在navItem前面…
\ $ \ endgroup \ $
– Ry-
13年5月16日在20:03
\ $ \ begingroup \ $
这比接受的答案要好，尽管我认为使用content-wrap元素上的数据属性代替ID会更干净。像.content-wrap [data-wrapid = VAR]这样的选择器不会明显变慢。另外，只需使用eq（）选择第n个元素。
\ $ \ endgroup \ $
–心怀不满的山羊
13年5月16日在22:51
#2 楼
您根本不需要更改HTML标记。您可以使用带CSS的启动器选择器（^=）：// All elements with an ID starting with navItem...
$('[id^="navItem"]').on('click', function() {
var
// Get the ID as a string
id = this.id,
// Get the last character from the ID
num = id.charAt(id.length-1)
;
// Hide all elements with an ID starting with content-wrap...
$('[id^="content-wrap"]').hide();
// Fade in the relevant ID
$('#content-wrap'+num).fadeIn(1000);
});
如果我们假设使用了“ navItem5”，则变量将包含以下内容：
id == "navItem5"
num == "5"
$('#content-wrap'+num) == "#content-wrap5"
JSFiddle示例。
这是非常基本的jQuery。通过阅读官方jQuery交互式教程，您会受益匪浅：http://try.jquery.com。
评论
\ $ \ begingroup \ $
为什么不这样做：var id = this.id ;？不需要$（this）.attr（'id'）...速度也大大提高。
\ $ \ endgroup \ $
– RobH
13年5月16日在12:59
\ $ \ begingroup \ $
这是一个简单的疏忽，我修改了答案。 :)
\ $ \ endgroup \ $
–詹姆斯·唐纳利（James Donnelly）
13年5月16日在13:01
\ $ \ begingroup \ $
如果OP要使用相同的单击来显示/淡出，则可能包括.toggle（）。
\ $ \ endgroup \ $
–尊尼·苏特
13年5月16日在16:15
\ $ \ begingroup \ $
尽管此答案有效，但从ID属性中提取数字非常不明智。
\ $ \ endgroup \ $
–心怀不满的山羊
13年5月16日在22:43
\ $ \ begingroup \ $
我将在几个小时前对我的投票发表评论：这非常脆弱，并且肆意滥用ID。例如，如果数字超过9怎么办？为什么不只使用干净高效的类呢？为什么不缓存该集合，或将其放入数组中，或其他类似的东西？
\ $ \ endgroup \ $
– Ry-
13年5月16日23:37
#3 楼
我认为这应该可以解决问题for (var j = 1; j <= 5; j++) {
(function(i){
$("#navItem" + i).on('click', function(){
$('#content-wrap1').hide();
$('#content-wrap2').hide();
$('#content-wrap3').hide();
$('#content-wrap4').hide();
$('#content-wrap5').hide();
$('#content-wrap' + i).fadeIn(1000);
});
})(j);
}
评论
\ $ \ begingroup \ $
您好，您能解释一下for循环中发生了什么吗？
\ $ \ endgroup \ $
– crmepham
13年5月16日在12:37
\ $ \ begingroup \ $
@crm：在循环内部，我定义了一个将数字作为参数的函数。定义函数后，我立即通过该语句（j）对其进行调用。这是一个关闭。
\ $ \ endgroup \ $
– Claudio Redi
13年5月16日在12:41
\ $ \ begingroup \ $
我如何持有价值？您不应该在循环中调用j吗？还有为什么最后括号中的j是这样的呢？
\ $ \ endgroup \ $
– crmepham
13年5月16日在12:44
\ $ \ begingroup \ $
@crm：这是闭包的魔力：）在这里，您有一个非常普遍的问题，可以澄清此主题stackoverflow.com/questions/111102/…。最后括号中的j是调用我刚刚用参数j定义的函数的方式
\ $ \ endgroup \ $
– Claudio Redi
13年5月16日在12:54
#4 楼
是的，有...有很多方法可以简化此操作。.我正在通过对data标签使用<a>属性来实现这一点...并向所有内容<div>添加相同的类。（我在这里使用的是内容）... HTML
<nav>
<!-- Start of side menu -->
<ul id="mainNav">
<li class="mainNavItem"><a href="#" id="navItem1" data-content="content-wrap1">Home</a>
</li>
<li class="mainNavItem"><a href="#" id="navItem2" data-content="content-wrap2">Prices</a>
</li>
<li class="mainNavItem"><a href="#" id="navItem3" data-content="content-wrap3">Find us</a>
</li>
<li class="mainNavItem"><a href="#" id="navItem4" data-content="content-wrap4">Reviews</a>
</li>
<li class="mainNavItem"><a href="#" id="navItem5" data-content="content-wrap5">Gallery</a>
</li>
</ul>
</nav>
<!-- closes mainNav -->
<div id="content-wrap1" class="content">Home</div>
<div id="content-wrap2" class="content">Prices contents</div>
<div id="content-wrap3" class="content">find us contents</div>
<div id="content-wrap4" class="content">review contents</div>
<div id="content-wrap5" class="content">gallery contents</div>
$('ul#mainNav li a').click(function () {
$('.content').hide();
$('#' + $(this).data('content')).fadeIn(1000);
});
function fadeInFirstContent() {
$('#content-wrap1').fadeIn(1000);
}
fadeInFirstContent();
或不向内容添加类..
$(function(){
$('ul#mainNav li a').click(function () {
$('div[id^="content-wrap"]').hide();
$('#' + $(this).data('content')).fadeIn(1000);
});
$('#content-wrap1').fadeIn(1000);
});
在这里拨弄
#5 楼
它可以做得更短：http://jsfiddle.net/2ADyp/
function hideAll(){
$('#content-wrap1').hide();
$('#content-wrap2').hide();
$('#content-wrap3').hide();
$('#content-wrap4').hide();
$('#content-wrap5').hide();
}
function showSelected(e){
hideAll();
$(e.target.hash).fadeIn(100);
}
$("#mainNav").find("a").each(function(i,o){
$(o).click(showSelected);
});
评论
\ $ \ begingroup \ $
hideAll（）可以最小化为$（'＃content-wrap1，＃content-wrap2，＃content-wrap3，＃content-wrap4，＃content-wrap5'）。hide（）
\ $ \ endgroup \ $
–穆罕默德·奥默·阿斯兰
19年4月26日在18:13
#6 楼
假设您使用的表达结构如下：<nav>
<a href="#content-wrap1" id="navItem1" class="navItem">One</a>
<a href="#content-wrap2" id="navItem2" class="navItem">Two</a>
<a href="#content-wrap3" id="navItem3" class="navItem">Three</a>
</nav>
<div id="content-wrap1" class="content-wrap">...</div>
<div id="content-wrap2" class="content-wrap">...</div>
<div id="content-wrap3" class="content-wrap">...</div>
然后可以以简短的表达方式切换
content-wrap项目的显示。$('.navItem').on('click', function (e) {
$('.content-wrap').hide();
$($(this).prop('hash')).fadeIn(1000);
e.preventDefault();
});
这确实建议更改HTML，但仅以使内容具有语义的方式进行。
评论
\ $ \ begingroup \ $
您应该使用data- *属性存储数据，而不是href属性（），然后可以使用$（this）将其提取.data（'id'）。
\ $ \ endgroup \ $
–詹姆斯·唐纳利（James Donnelly）
13年5月16日在16:45
\ $ \ begingroup \ $
@JamesDonnelly，如果单击的项目是链接，则href更合适。片段标识符旨在将用户指向DOM中的特定ID，因此，即使禁用了JavaScript，也会突出显示同一部分。如果该项目不是链接，则使用[data- *]属性当然有意义，尽管我可能会使用data-target或data-content-element，因为data-id似乎有点含糊。
\ $ \ endgroup \ $
–zzzzBov
13年5月16日在16:53
\ $ \ begingroup \ $
如果禁用了JavaScript，则该元素无论如何都不可见，因此在这种情况下无关紧要。
\ $ \ endgroup \ $
–詹姆斯·唐纳利（James Donnelly）
13年5月16日在17:58
\ $ \ begingroup \ $
@JamesDonnelly，“该元素无论如何都不可见”，如果您正确设置样式和脚本，则所有元素将在禁用javascript的情况下显示。尽管可能不是OP设置的内容，但您必须记住这是“代码审查”。
\ $ \ endgroup \ $
–zzzzBov
13年5月16日在18:15
#7 楼
这是对HTML所做的更改最小的内容（仅用于内容的通用容器）：$( '.mainNavItem a' ).on( 'click', function() {
$( '#content > div' ).hide() // hide all content divs
// (immediate div children of the main container)
.eq( $( this ).parent().index() ) // match the index of the clicked link
// with the index of the corresponding content
.fadeIn( 1000 ); // display that div
});
http://jsfiddle.net/VQtwa/2/
#8 楼
为什么不完全跳过JavaScript？http://jsfiddle.net/zCd9g/
编辑：抱歉，看到这是一个JavaScript问题，对您完全无益。这是对HTML进行一些修改的解决方案：
http://jsfiddle.net/aECMb/
$('.link').click(function(e) {
e.preventDefault();
var $con = $('#main-content'),
tar = $(this).data('show');
$con.find('.contents').fadeOut();
$con.find(tar).fadeIn();
});
评论
\ $ \ begingroup \ $
在JSFiddle上发布有效的演示是可以的。不过，请在答案中添加相关代码。
\ $ \ endgroup \ $
– \ nibra
13年5月18日在10:44
#9 楼
我注意到了一些细节，让我解释一下：CSS选择器。 jQuery也允许您使用它们：
$("[id^='content-wrap']")->将选择id以'content-wrap'开头的所有元素子字符串是JavaScript的可用方法：
var number = "navItem15".substring(7);
// will return what is after position 7..
// resulting the number "15"
从第一个位置开始菜单。这是最好的方法：
(function(){
$("#navItem1").trigger("click");
})();
// using this approach, you won't need copy your code into a function as you did
// this approach triggers the "click" event in the first menu automatically
好吧，希望您知道了！
很好的编码！
评论
由于某种原因，所有当前答案似乎都希望您更改HTML或添加随机循环。没有必要。我的回答是使用jQuery基本功能，仅用5行即可实现所有这些功能：codereview.stackexchange.com/a/26236/24039。您将从官方jQuery交互式教程中受益：try.jquery.com。@JamesDonnelly，应该将HTML更改为使用类，而不是这些重复的[id]。它使HTML更能表达这些元素显然共享相似类的事实。
尽管@crm可能会受到限制并且无法更新HTML，但我同意zzzzBov的观点，这是最好的选择。