问题
I'm new to jQuery and javascript in general but am plugging my way through thanks to sites like these.
I have a page with six hidden divs that are called with corresponding links with individual ids. When each div is made visable (.fadeIn), the currently displayed div is hidden (.fadeOut).
It all works fine but my code seems to be really long and ungainly. Is there an easier, shorter, less code-intensive way to perform the same task please?
Here is my js:
Many thanks in advance. Mike
$(document).ready(function(){
$("#link1").click(function() {
$("#panel2").fadeOut("slow", function() {
$("#panel3").fadeOut("slow", function() {
$("#panel4").fadeOut("slow", function() {
$("#panel5").fadeOut("slow", function() {
$("#panel6").fadeOut("slow", function() {
$("#panel1").fadeIn("slow")});
});
});
});
});
});
$("#link2").click(function() {
$("#panel1").fadeOut("slow", function() {
$("#panel3").fadeOut("slow", function() {
$("#panel4").fadeOut("slow", function() {
$("#panel5").fadeOut("slow", function() {
$("#panel6").fadeOut("slow", function() {
$("#panel2").fadeIn("slow")});
});
});
});
});
});
$("#link3").click(function() {
$("#panel1").fadeOut("slow", function() {
$("#panel2").fadeOut("slow", function() {
$("#panel4").fadeOut("slow", function() {
$("#panel5").fadeOut("slow", function() {
$("#panel6").fadeOut("slow", function() {
$("#panel3").fadeIn("slow")});
});
});
});
});
});
$("#link4").click(function() {
$("#panel1").fadeOut("slow", function() {
$("#panel2").fadeOut("slow", function() {
$("#panel3").fadeOut("slow", function() {
$("#panel5").fadeOut("slow", function() {
$("#panel6").fadeOut("slow", function() {
$("#panel4").fadeIn("slow")});
});
});
});
});
});
$("#link5").click(function() {
$("#panel1").fadeOut("slow", function() {
$("#panel2").fadeOut("slow", function() {
$("#panel3").fadeOut("slow", function() {
$("#panel4").fadeOut("slow", function() {
$("#panel6").fadeOut("slow", function() {
$("#panel5").fadeIn("slow")});
});
});
});
});
});
$("#link6").click(function() {
$("#panel1").fadeOut("slow", function() {
$("#panel2").fadeOut("slow", function() {
$("#panel3").fadeOut("slow", function() {
$("#panel4").fadeOut("slow", function() {
$("#panel5").fadeOut("slow", function() {
$("#panel6").fadeIn("slow")});
});
});
});
});
});
});
回答1:
This code could certainly be made more efficient and flexible, but for a simple 6 element example as the above it should be enough. This was mostly done as just a proof of concept.
I chose to add the classes programmatically, but ideally you should have the classes added in the HTML. If it were me I would probably also have used expandos instead of id string replacement.
EDIT, fixes added:
Recursive function for sequential animation makes sure that fadeIn is processed at the right time. There may be a more efficient method for this, such as using a counter, but for just 6 elements it should be fine, and this matches your original code more faithfully.
Fix for animations processing at incorrect times, such as when you click many links simultaneously, causing multiple panels to try to fadeIn, by stopping and finishing animations.
jQuery(function($){
//add links/panels class to all elements whose id begins with link/panel
$("[id^=link]").addClass("links");
$("[id^=panel]").addClass("panels");
$(".links").click(function(e){
//find all panels, make a normal array, and stop/finish all animations
var panels=$.makeArray($(".panels").stop(true, true));
//find panel to show
var panelShow=$("#"+this.id.replace("link","panel"));
//recursive function to execute fades in sequence
function queueFX(queue){
if(queue.length==0){
panelShow.fadeIn("slow");
return;
}
$(queue.shift()).fadeOut("slow", function(){
queueFX(queue);
});
}
queueFX(panels);
//stop event propogation and default behavior, commented out because you don't seem to want this behavior
e.preventDefault();
//e.stopPropagation();
//return false;
});
});
回答2:
Having your ids it might be like this:
$.each([1,2,3,4,5,6], function(_, index) {
$('#link' + index).click(function() {
$('[id^=panel]').fadeOut('slow', function() {
$('#panel' + index).fadeIn('slow');
});
})
})
回答3:
$(document).ready(function(){
$("a[id^='link']").click(function() {
$("div[id^='panel']").fadeOut("slow");
$("div#"+this.id.replace('link', 'panel')).fadeIn("slow");
});
});
回答4:
The best way would be to use http://api.jquery.com/toggle/
Toggle lets you the animation for one
$('#clickme').click(function() {
$('#book').toggle('slow', function() {
// Animation complete.
});
});
As for truely Shortening the code I would use a class identifier for your panels.
Identify panel groups like
$("#panel3").fadeOut("slow", function() {
$("#panel4").fadeOut("slow", function() {
$("#panel5").fadeOut("slow", function() {
$("#panel6").fadeOut("slow", function() {
and then assign the associated HTML elements a class like
Your jQuery can now be $(".panelGroup1").fadeOut...
The . class selector for jQuery and the # is the id Selector.
Check out selectors and you can do a bunch of other crazy things
http://api.jquery.com/?ns0=1&s=Selector&go=
回答5:
Lots of good solutions, I have a general comment:
It seems a bit unnecessary for each panel to have a unique id. You might have a perfect reason to do so, but wouldn't it be enough to group your panels with a class selector? This would make your overall code, as well as your jquery, much simpler and easier to maintain.
回答6:
You could do something like
function fadeElementIn(fadedElement) {
$("[id^=panel]").fadeOut("slow");
$(fadedElement).fadeIn("slow");
}
And then:
$(document).ready(function(){
$("#link1").click(fadeElementIn($("#panel1")));
$("#link2").click(fadeElementIn($("#panel2")));
$("#link3").click(fadeElementIn($("#panel3")));
$("#link4").click(fadeElementIn($("#panel4")));
}
remember to adjust your elements positioning if you want the one that's fading out and the one that's fading in to occupy the same space
cheers
来源：https://stackoverflow.com/questions/5571110/jquery-fadein-and-fadeout-swapping-divs