[英]jQuery window resize not working properly
Pseudocode: 伪代码:
My jQuery code is as following: 我的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);
});
But the problem is that at the first page load everything is performed well, but at resize and back again, the script is not doing his job. 但是问题在于 ,在第一个页面加载时,一切都执行得很好,但是在调整大小并再次返回时,脚本没有完成他的工作。 Also on each resize all the content from the sidebar, is entered several times into the placeholder (instead of once).
同样,每次调整大小时,边栏中的所有内容都会多次输入到占位符中(而不是一次)。
And my working jsfiddle. 还有我的工作jsfiddle。
I just do not know what I'm doing wrong. 我只是不知道我在做什么错。
A few problems: 一些问题:
placeHolder
div again! placeHolder
div! $()
around jQuery variables $()
eg 例如
$(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/ JSFiddle: http : //jsfiddle.net/TrueBlueAussie/jtfv4jjt/8/
Note: Your code can be simplified further as you only need to clone once at start and then just toggle visibility of that panel. 注意:您的代码可以进一步简化,因为您只需要在开始时克隆一次,然后只需切换该面板的可见性即可。
eg 例如
$(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/ JSFiddle: http : //jsfiddle.net/TrueBlueAussie/jtfv4jjt/6/
Again this can be shortened: 再次可以缩短:
$(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/ JSFiddle: http : //jsfiddle.net/TrueBlueAussie/jtfv4jjt/7/
That's all for now :) 目前为止就这样了 :)
If you use Twitter bootstrap, you can simply decorate the panel with an appropriate class (something like visible-md
) and all this will happen for you :) 如果使用Twitter引导程序,则可以简单地用适当的类(类似于
visible-md
)装饰面板,所有这些事情都将由您完成:)
Take the event listener outside the document.ready()
function: 将事件侦听器置于
document.ready()
函数之外:
$(document).ready(function(){
...
});
$(window).resize(checkWidth);
Also, take out the checkWidth()
function outside the document.ready()
function. 另外,在
checkWidth()
函数外部取出checkWidth()
document.ready()
函数。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.