I'm kinda new to coding with jQuery / JavaScript. I've managed to write the code below but I think there is a much easier way to write it down. Is there somebody who can show me how?
我对使用jQuery / JavaScript进行编码有点新意。我已经设法编写下面的代码,但我认为有一种更简单的方法来写下来。有谁能告诉我怎么样?
$(document).ready(function(){
$(".btn_home").click(function(){
$("#article1").fadeIn();
$("#article2").fadeOut();
$("#article3").fadeOut();
$("#article4").fadeOut();
$("#blended").fadeOut();
$("#contact").fadeOut();
});
$(".btn_prt").click(function(){
$("#article1").fadeOut();
$("#article2").fadeIn();
$("#article3").fadeOut();
$("#article4").fadeOut();
$("#over").fadeIn();
$("#blended").fadeOut();
$("#contact").fadeOut();
});
$(".btn_blog").click(function(){
$("#article1").fadeOut();
$("#article2").fadeOut();
$("#article3").fadeIn();
$("#article4").fadeOut();
$("#over").fadeOut();
$("#blended").fadeIn();
$("#contact").fadeOut();
});
$(".btn_abt").click(function(){
$("#article1").fadeOut();
$("#article2").fadeOut();
$("#article3").fadeOut();
$("#article4").fadeIn();
$("#over").fadeOut();
$("#blended").fadeOut();
$("#contact").fadeIn();
});
});
3 个解决方案
#1
2
The problem here is code duplication. You need to use a function with a parameter to help with that.
这里的问题是代码重复。您需要使用带参数的函数来帮助解决这个问题。
$(document).ready(function() {
$(".btn_prt").click(function(){
fadeAllBut("#article2, #over");
});
$(".btn_blog").click(function(){
fadeAllBut("#article3, #blended");
});
$(".btn_abt").click(function(){
fadeAllBut("#article4, #contact");
});
});
function fadeAllBut(itemsToFadeIn) {
$(".fades").fadeOut();
$(itemsToFadeIn).stop().fadeIn();
}
Of course, you would need to give the CSS class fades
to all the items you would like to fade in or out.
当然,您需要将CSS类淡化为您想要淡入或淡出的所有项目。
#2
10
You can combine items:
您可以组合项目:
$("#foo, #bar, #baz").fadeIn();
or you may use classes
或者你可以使用课程
$('.notneeded').fadeOut();
#3
0
$(document)
.ready(function () {
$(".btn_home")
.click(function () {
$("#article1")
.fadeIn(), $("#article2")
.fadeOut(), $("#article3")
.fadeOut(), $("#article4")
.fadeOut(), $("#blended")
.fadeOut(), $("#contact")
.fadeOut()
}), $(".btn_prt")
.click(function () {
$("#article1")
.fadeOut(), $("#article2")
.fadeIn(), $("#article3")
.fadeOut(), $("#article4")
.fadeOut(), $("#over")
.fadeIn(), $("#blended")
.fadeOut(), $("#contact")
.fadeOut()
}), $(".btn_blog")
.click(function () {
$("#article1")
.fadeOut(), $("#article2")
.fadeOut(), $("#article3")
.fadeIn(), $("#article4")
.fadeOut(), $("#over")
.fadeOut(), $("#blended")
.fadeIn(), $("#contact")
.fadeOut()
}), $(".btn_abt")
.click(function () {
$("#article1")
.fadeOut(), $("#article2")
.fadeOut(), $("#article3")
.fadeOut(), $("#article4")
.fadeIn(), $("#over")
.fadeOut(), $("#blended")
.fadeOut(), $("#contact")
.fadeIn()
})
})
#1
2
The problem here is code duplication. You need to use a function with a parameter to help with that.
这里的问题是代码重复。您需要使用带参数的函数来帮助解决这个问题。
$(document).ready(function() {
$(".btn_prt").click(function(){
fadeAllBut("#article2, #over");
});
$(".btn_blog").click(function(){
fadeAllBut("#article3, #blended");
});
$(".btn_abt").click(function(){
fadeAllBut("#article4, #contact");
});
});
function fadeAllBut(itemsToFadeIn) {
$(".fades").fadeOut();
$(itemsToFadeIn).stop().fadeIn();
}
Of course, you would need to give the CSS class fades
to all the items you would like to fade in or out.
当然,您需要将CSS类淡化为您想要淡入或淡出的所有项目。
#2
10
You can combine items:
您可以组合项目:
$("#foo, #bar, #baz").fadeIn();
or you may use classes
或者你可以使用课程
$('.notneeded').fadeOut();
#3
0
$(document)
.ready(function () {
$(".btn_home")
.click(function () {
$("#article1")
.fadeIn(), $("#article2")
.fadeOut(), $("#article3")
.fadeOut(), $("#article4")
.fadeOut(), $("#blended")
.fadeOut(), $("#contact")
.fadeOut()
}), $(".btn_prt")
.click(function () {
$("#article1")
.fadeOut(), $("#article2")
.fadeIn(), $("#article3")
.fadeOut(), $("#article4")
.fadeOut(), $("#over")
.fadeIn(), $("#blended")
.fadeOut(), $("#contact")
.fadeOut()
}), $(".btn_blog")
.click(function () {
$("#article1")
.fadeOut(), $("#article2")
.fadeOut(), $("#article3")
.fadeIn(), $("#article4")
.fadeOut(), $("#over")
.fadeOut(), $("#blended")
.fadeIn(), $("#contact")
.fadeOut()
}), $(".btn_abt")
.click(function () {
$("#article1")
.fadeOut(), $("#article2")
.fadeOut(), $("#article3")
.fadeOut(), $("#article4")
.fadeIn(), $("#over")
.fadeOut(), $("#blended")
.fadeOut(), $("#contact")
.fadeIn()
})
})