我们如何将这两者合并在一起以增强功能并使其更易于编辑。
顶部的一个是在屏幕调整大小时触发功能,另一个是在加载时检测屏幕尺寸。
整个函数:
(function(){
//detect the width on page load//
$(document).ready(function(){
var width = $(window).width();
if(width <= 770){
$('#home-sectionB img').insertBefore($('#home-sectionB span'));
$('.detailsBox').insertBefore($('.imagesGrid'));
} else {
$('#home-sectionB span').insertBefore($('#home-sectionB img'));
$('.imagesGrid').insertBefore($('.detailsBox'));
}
});
//update the width value when the browser is resized//
$(window).resize(function(){
var width = $(window).width();
if(width <= 770){
$('#home-sectionB img').insertBefore($('#home-sectionB span'));
$('.detailsBox').insertBefore($('.imagesGrid'));
} else {
$('#home-sectionB span').insertBefore($('#home-sectionB img'));
$('.imagesGrid').insertBefore($('.detailsBox'));
}
});
})(jQuery);
顶部:
(function(){
//detect the width on page load//
$(document).ready(function(){
var width = $(window).width();
if(width <= 770){
$('#home-sectionB img').insertBefore($('#home-sectionB span'));
$('.detailsBox').insertBefore($('.imagesGrid'));
} else {
$('#home-sectionB span').insertBefore($('#home-sectionB img'));
$('.imagesGrid').insertBefore($('.detailsBox'));
}
});
底部:
//update the width value when the browser is resized//
$(window).resize(function(){
var width = $(window).width();
if(width <= 770){
$('#home-sectionB img').insertBefore($('#home-sectionB span'));
$('.detailsBox').insertBefore($('.imagesGrid'));
} else {
$('#home-sectionB span').insertBefore($('#home-sectionB img'));
$('.imagesGrid').insertBefore($('.detailsBox'));
}
});
})(jQuery);
最佳答案
如果它们完全相同,只需创建一个单独的函数并在这些事件上调用它。
$(function(){
//detect the width on page load//
$(document).ready(handleResize); // Notice you're already in the ready event
// on this line so you can just call it here
//update the width value when the browser is resized//
$(window).resize(handleResize);
});
function handleResize(){
var width = $(window).width();
if(width <= 770){
$('#home-sectionB img').insertBefore($('#home-sectionB span'));
$('.detailsBox').insertBefore($('.imagesGrid'));
} else {
$('#home-sectionB span').insertBefore($('#home-sectionB img'));
$('.imagesGrid').insertBefore($('.detailsBox'));
}
}
关于javascript - 如何增强这个小功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18629698/