jQuery window 调整大小无法正常工作
jQuery window resize not working properly
伪代码:
- 如果 window 大小等于/或大于 768 从 #sidebar 中取出内容并将其输入占位符 div
- 如果window尺寸小于768,则不运行以上。
我的jQuery代码如下:
$(document).ready(function () {
var $window = $(window);
function checkWidth() {
//set main vars
var windowsize = $window.width();
var $sideBarContent = $('#sidebar .dummy-content');
var $placeHolder = $('#place-holder');
//perform the main check
if (windowsize >= 768 && $('#place-holder').length) {
$($sideBarContent).clone(true)
.appendTo($($placeHolder));
}
else {
$($placeHolder).hide();
}
}
// Execute on load
checkWidth();
// Bind event listener
$(window).resize(checkWidth);
});
但问题是在第一个页面加载时一切都表现良好,但在调整大小并再次返回时,脚本没有完成他的工作。同样在每次调整侧边栏中的所有内容时,都会在占位符中输入多次(而不是一次)。
我只是不知道我做错了什么。
将事件监听器带到document.ready()
函数之外:
$(document).ready(function(){
...
});
$(window).resize(checkWidth);
另外,把document.ready()
函数外面的checkWidth()
函数去掉
几个问题:
- 您添加新项目的逻辑总是正确的(因为您只检查元素是否存在 - 它总是存在)。
- 您的 child 检查需要在宽度检查内(单独检查)。
- 您需要再次显示
placeHolder
div!
- 您在 jQuery 变量周围有一些多余的
$()
- 对于所有必需的元素,您有 jQuery 个变量,但有时您没有使用它们。
例如
$(document).ready(function () {
var $window = $(window);
function checkWidth() {
//set main vars
var windowsize = $window.width();
var $sideBarContent = $('#sidebar .dummy-content');
var $placeHolder = $('#place-holder');
//perform the main check
if (windowsize >= 768) {
if (!$placeHolder.children().length) {
$sideBarContent.clone(true)
.appendTo($placeHolder);
}
$placeHolder.show();
} else {
$placeHolder.hide();
}
}
// Bind event listener and do initial execute
$window.resize(checkWidth).trigger("resize");
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/jtfv4jjt/8/
注意:您的代码可以进一步简化,因为您只需要在开始时克隆一次,然后只需切换该面板的可见性即可。
例如
$(document).ready(function () {
var $window = $(window);
var $sideBarContent = $('#sidebar .dummy-content');
var $placeHolder = $('#place-holder');
function checkWidth() {
$placeHolder.toggle($window.width() >= 768);
}
// Clone at start - then hide it
$sideBarContent.clone(true).appendTo($placeHolder);
// Bind event listener and do initial execute
$window.resize(checkWidth).trigger("resize");
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/jtfv4jjt/6/
同样可以缩短:
$(function () {
var $window = $(window);
var $sideBarContent = $('#sidebar .dummy-content');
var $placeHolder = $('#place-holder');
// Clone content at start - then hide it
$sideBarContent.clone(true).appendTo($placeHolder);
// Bind event listener and do initial execute
$window.resize(function(){
$placeHolder.toggle($window.width() >= 768)
}).trigger("resize");
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/jtfv4jjt/7/
暂时就这些:)
最后一点:
如果您使用 Twitter bootstrap,您可以简单地用适当的 class 装饰面板(类似于 visible-md
),所有这一切都会为您发生:)
伪代码:
- 如果 window 大小等于/或大于 768 从 #sidebar 中取出内容并将其输入占位符 div
- 如果window尺寸小于768,则不运行以上。
我的jQuery代码如下:
$(document).ready(function () {
var $window = $(window);
function checkWidth() {
//set main vars
var windowsize = $window.width();
var $sideBarContent = $('#sidebar .dummy-content');
var $placeHolder = $('#place-holder');
//perform the main check
if (windowsize >= 768 && $('#place-holder').length) {
$($sideBarContent).clone(true)
.appendTo($($placeHolder));
}
else {
$($placeHolder).hide();
}
}
// Execute on load
checkWidth();
// Bind event listener
$(window).resize(checkWidth);
});
但问题是在第一个页面加载时一切都表现良好,但在调整大小并再次返回时,脚本没有完成他的工作。同样在每次调整侧边栏中的所有内容时,都会在占位符中输入多次(而不是一次)。
我只是不知道我做错了什么。
将事件监听器带到document.ready()
函数之外:
$(document).ready(function(){
...
});
$(window).resize(checkWidth);
另外,把document.ready()
函数外面的checkWidth()
函数去掉
几个问题:
- 您添加新项目的逻辑总是正确的(因为您只检查元素是否存在 - 它总是存在)。
- 您的 child 检查需要在宽度检查内(单独检查)。
- 您需要再次显示
placeHolder
div! - 您在 jQuery 变量周围有一些多余的
$()
- 对于所有必需的元素,您有 jQuery 个变量,但有时您没有使用它们。
例如
$(document).ready(function () {
var $window = $(window);
function checkWidth() {
//set main vars
var windowsize = $window.width();
var $sideBarContent = $('#sidebar .dummy-content');
var $placeHolder = $('#place-holder');
//perform the main check
if (windowsize >= 768) {
if (!$placeHolder.children().length) {
$sideBarContent.clone(true)
.appendTo($placeHolder);
}
$placeHolder.show();
} else {
$placeHolder.hide();
}
}
// Bind event listener and do initial execute
$window.resize(checkWidth).trigger("resize");
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/jtfv4jjt/8/
注意:您的代码可以进一步简化,因为您只需要在开始时克隆一次,然后只需切换该面板的可见性即可。
例如
$(document).ready(function () {
var $window = $(window);
var $sideBarContent = $('#sidebar .dummy-content');
var $placeHolder = $('#place-holder');
function checkWidth() {
$placeHolder.toggle($window.width() >= 768);
}
// Clone at start - then hide it
$sideBarContent.clone(true).appendTo($placeHolder);
// Bind event listener and do initial execute
$window.resize(checkWidth).trigger("resize");
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/jtfv4jjt/6/
同样可以缩短:
$(function () {
var $window = $(window);
var $sideBarContent = $('#sidebar .dummy-content');
var $placeHolder = $('#place-holder');
// Clone content at start - then hide it
$sideBarContent.clone(true).appendTo($placeHolder);
// Bind event listener and do initial execute
$window.resize(function(){
$placeHolder.toggle($window.width() >= 768)
}).trigger("resize");
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/jtfv4jjt/7/
暂时就这些:)
最后一点:
如果您使用 Twitter bootstrap,您可以简单地用适当的 class 装饰面板(类似于 visible-md
),所有这一切都会为您发生:)