我正在为一个网站编写一些代码,该网站使用4个列表项目在页面上的不同位置显示/隐藏4个不同的div。jQuery简化
下面是我在做什么粗略的例子:
<ul>
<li id="first">One</li>
<li id="second">Two</li>
<li id="third">Three</li>
<li id="fourth">Four</li>
</ul>
<div id="one">This is the first div</div>
<div id="two">This is the second div</div>
<div id="three">This is the third div</div>
<div id="four">This is the four div</div>
而且我有一些丑陋的屁股JS代码怎么回事,因为我不记得我的生活/弄清楚如何以简化它。
$("#first").click(function() {
$("#one").fadeIn();
$("#two, #three, #four").fadeOut();
});
$("#second").click(function() {
$("#two").fadeIn();
$("#one, #three, #four").fadeOut();
});
$("#third").click(function() {
$("#three").fadeIn();
$("#two, #one, #four").fadeOut();
});
$("#fourth").click(function() {
$("#four").fadeIn();
$("#two, #three, #one").fadeOut();
});
这就是我所需要的,但我知道必须有一个更简单的方法来做到这一点。这是一个JSFiddle它的工作 - http://jsfiddle.net/claycauley/FBrx5/
如果任何人都可以帮助我理解为什么/如何简化它,这也会很好,因为我正在努力学习,但却陷入了困境。
jQuery有一些更简单的方法,但是(因为你正在努力学习),一种管理方法就是使用一组元素和一个函数来执行一个函数并隐藏其他函数。 – 2012-08-11 03:09:20