[英]How can I improve my Javascript/jQuery logic? Example included
This isn't a direct question, but more a question on how I can improve my javascript by condensing my code and writing in a more logical way.这不是一个直接的问题,而是一个关于如何通过压缩我的代码并以更合乎逻辑的方式编写来改进我的 javascript 的问题。
Basically I just wrote some javascript, using jQuery, in order to create some portfolio animations on my website.基本上我只是写了一些 javascript,使用 jQuery,以便在我的网站上创建一些组合动画。 You can view the portfolio and animations here:
您可以在此处查看作品集和动画:
http://www.saelstrom.com/portfolio/full-portfolio http://www.saelstrom.com/portfolio/full-portfolio
Everything I wanted to accomplish seems to work.我想要完成的一切似乎都奏效了。 However I just have this feeling that it could have been written with a lot less code.
然而,我只是有这种感觉,它可以用更少的代码编写。 I could be wrong, but I thought I'd put the question out there just in case there's any experts who'd like to point me in the right direction for the next time I write some javascript.
我可能是错的,但我想我会把问题放在那里,以防万一有任何专家愿意在我下次写 javascript 时为我指出正确的方向。
Here's my scripts:这是我的脚本:
$(document).ready(function() {
// ------------------------------------------------------
// - Create jQuery Function - Fade Then Slide Toggle
// ------------------------------------------------------
jQuery.fn.fadeThenSlideToggle = function(speed, callback) {
if (this.is(":visible")) {
return this.fadeTo(speed, 0).slideUp(speed, callback);
} else {
return this.slideDown(speed).fadeTo(speed, 1, callback);
}
};
// ------------------------------------------------------
// - Portfolio Item Collapse
// ------------------------------------------------------
$('.folio-item').click(function(){
collapse = $(this).find('.folio-collapse');
collapse.slideToggle('slow',function(){
if($(this).is(':visible')){
$(this).parent().addClass('open');
}
else
{
$(this).parent().removeClass('open');
}
});
});
// ------------------------------------------------------
// - Portfolio Item Hover
// ------------------------------------------------------
$('.folio-item').hover(function(){
hoveritem = $(this).find('.hover-item');
hoveritem.fadeIn('fast');
},
function(){
hoveritem = $(this).find('.hover-item');
hoveritem.fadeOut('fast');
});
$('.folio-screen').hover(function(){
hoveritem = $(this).find('.launch');
hoveritem.fadeIn('fast');
},
function(){
hoveritem = $(this).find('.launch');
hoveritem.fadeOut('fast');
});
// ------------------------------------------------------
// - Portfolio Show/Hide Section Wrappers
// ------------------------------------------------------
// - Web Design - Click Function
$('li.port-web').click(function(){
if($('.web-wrapper').is(':visible')){
// Do Nothing
}
else if($('.marketing-wrapper').is(':visible')){
// Remove 'active' Class
$(this).parent().find('li.port-marketing').removeClass('active');
// Add Class 'active'
$(this).parent().find('li.port-web').addClass('active');
// Hide Marketing Wrapper
$('.marketing-wrapper').fadeThenSlideToggle('slow',function(){
// Show Web Wrapper
$('.web-wrapper').fadeThenSlideToggle('slow');
});
}
else if($('.branding-wrapper').is(':visible')){
// Remove 'active' Class
$(this).parent().find('li.port-branding').removeClass('active');
// Add Class 'active'
$(this).parent().find('li.port-web').addClass('active');
// Hide Branding Wrapper
$('.branding-wrapper').fadeThenSlideToggle('slow',function(){
// Show Web Wrapper
$('.web-wrapper').fadeThenSlideToggle('slow');
});
}
else if($('.landing-wrapper').is(':visible')){
// Remove 'active' Class
$(this).parent().find('li.port-landing').removeClass('active');
// Add Class 'active'
$(this).parent().find('li.port-web').addClass('active');
// Hide Landing Wrapper
$('.landing-wrapper').fadeThenSlideToggle('slow',function(){
// Show Web Wrapper
$('.web-wrapper').fadeThenSlideToggle('slow');
});
}
});
// - Internet Marketing - Click Function
$('li.port-marketing').click(function(){
if($('.marketing-wrapper').is(':visible')){
// Do Nothing
}
else if($('.web-wrapper').is(':visible')){
// Remove 'active' Class
$(this).parent().find('li.port-web').removeClass('active');
// Add Class 'active'
$(this).parent().find('li.port-marketing').addClass('active');
// Hide Web Wrapper
$('.web-wrapper').fadeThenSlideToggle('slow',function(){
// Show Marketing Wrapper
$('.marketing-wrapper').fadeThenSlideToggle('slow');
});
}
else if($('.branding-wrapper').is(':visible')){
// Remove 'active' Class
$(this).parent().find('li.port-branding').removeClass('active');
// Add Class 'active'
$(this).parent().find('li.port-marketing').addClass('active');
// Hide Branding Wrapper
$('.branding-wrapper').fadeThenSlideToggle('slow',function(){
// Show Marketing Wrapper
$('.marketing-wrapper').fadeThenSlideToggle('slow');
});
}
else if($('.landing-wrapper').is(':visible')){
// Remove 'active' Class
$(this).parent().find('li.port-landing').removeClass('active');
// Add Class 'active'
$(this).parent().find('li.port-marketing').addClass('active');
// Hide Landing Wrapper
$('.landing-wrapper').fadeThenSlideToggle('slow',function(){
// Show Marketing Wrapper
$('.marketing-wrapper').fadeThenSlideToggle('slow');
});
}
});
// - Branding - Click Function
$('li.port-branding').click(function(){
if($('.branding-wrapper').is(':visible')){
// Do Nothing
}
else if($('.web-wrapper').is(':visible')){
// Remove 'active' Class
$(this).parent().find('li.port-web').removeClass('active');
// Add Class 'active'
$(this).parent().find('li.port-branding').addClass('active');
// Hide Web Wrapper
$('.web-wrapper').fadeThenSlideToggle('slow',function(){
// Show Branding Wrapper
$('.branding-wrapper').fadeThenSlideToggle('slow');
});
}
else if($('.landing-wrapper').is(':visible')){
// Remove 'active' Class
$(this).parent().find('li.port-landing').removeClass('active');
// Add Class 'active'
$(this).parent().find('li.port-branding').addClass('active');
// Hide Landing Wrapper
$('.landing-wrapper').fadeThenSlideToggle('slow',function(){
// Show Branding Wrapper
$('.branding-wrapper').fadeThenSlideToggle('slow');
});
}
else if($('.marketing-wrapper').is(':visible')){
// Remove 'active' Class
$(this).parent().find('li.port-marketing').removeClass('active');
// Add Class 'active'
$(this).parent().find('li.port-branding').addClass('active');
// Hide Marketing Wrapper
$('.marketing-wrapper').fadeThenSlideToggle('slow',function(){
// Show Branding Wrapper
$('.branding-wrapper').fadeThenSlideToggle('slow');
});
}
});
// - Landing Pages - Click Function
$('li.port-landing').click(function(){
if($('.landing-wrapper').is(':visible')){
// Do Nothing
}
else if($('.web-wrapper').is(':visible')){
// Remove 'active' Class
$(this).parent().find('li.port-web').removeClass('active');
// Add Class 'active'
$(this).parent().find('li.port-landing').addClass('active');
// Hide Web Wrapper
$('.web-wrapper').fadeThenSlideToggle('slow',function(){
// Show Landing Wrapper
$('.landing-wrapper').fadeThenSlideToggle('slow');
});
}
else if($('.branding-wrapper').is(':visible')){
// Remove 'active' Class
$(this).parent().find('li.port-branding').removeClass('active');
// Add Class 'active'
$(this).parent().find('li.port-landing').addClass('active');
// Hide Branding Wrapper
$('.branding-wrapper').fadeThenSlideToggle('slow',function(){
// Show Landing Wrapper
$('.landing-wrapper').fadeThenSlideToggle('slow');
});
}
else if($('.marketing-wrapper').is(':visible')){
// Remove 'active' Class
$(this).parent().find('li.port-marketing').removeClass('active');
// Add Class 'active'
$(this).parent().find('li.port-landing').addClass('active');
// Hide Marketing Wrapper
$('.marketing-wrapper').fadeThenSlideToggle('slow',function(){
// Show Landing Wrapper
$('.landing-wrapper').fadeThenSlideToggle('slow');
});
}
});
});
For one you could use more chaining:对于一个你可以使用更多的链接:
// ------------------------------------------------------
// - Portfolio Item Collapse
// ------------------------------------------------------
$('.folio-item').click(function(){
collapse = $(this).find('.folio-collapse').slideToggle('slow',function(){
if($(this).is(':visible')){
$(this).parent().addClass('open');
}
else
{
$(this).parent().removeClass('open');
}
});
});
// ------------------------------------------------------
// - Portfolio Item Hover
// ------------------------------------------------------
$('.folio-item').hover(function(){
hoveritem = $(this).find('.hover-item').fadeIn('fast');
},
function(){
hoveritem = $(this).find('.hover-item').fadeOut('fast');
});
$('.folio-screen').hover(function(){
hoveritem = $(this).find('.launch').fadeIn('fast');
},
function(){
hoveritem = $(this).find('.launch').fadeOut('fast');
});
You could remove redundant code:您可以删除冗余代码:
/* ALL THIS CODE CAN GO AWAY */
if($('.marketing-wrapper').is(':visible')){
// Do Nothing
}
if($('.web-wrapper').is(':visible')){
// Do Nothing
}
if($('.branding-wrapper').is(':visible')){
// Do Nothing
}
if($('.landing-wrapper').is(':visible')){
// Do Nothing
}
It's not bad.不算太差。 I'd start there.
我会从那里开始。 Your comments take up a lot of space which might give the illusion of verbosity:)
您的评论占用了大量空间,可能会产生冗长的错觉:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.