Hallo, ich versuche, eine Funktion zum Ändern der Fenstergröße und zum Bereitstellen von Dokumenten auszuführen. Da die Größenänderung durch das mobile Scrollen ausgelöst wird, muss überprüft werden, ob sich die Höhe nicht geändert hat. Dieser Code funktioniert für die Größenänderung, jedoch nicht beim Laden. Kann jemand erklären, warum die Funktion nicht für Dokumente ausgeführt wird? Danke im Voraus.
//CLOSE EXPANDED ELEMENTS FOR MOBILE
var $window = $(window);
var width = $(window).width();
var callback = function () {
if($(window).width() != width){
if ($window.width() < 756) {
$(".content_lower.collapse").removeClass('in');
}
else {
$(".content_lower.collapse").addClass('in');
}
}
};
$(document).ready(callback);
$(window).resize(callback);
console.log(callback.toString());
3 Antworten
Wenn das Dokument fertig ist, wird das Dokument gerade geladen und die Variable $(window).width() entspricht der Variablen width.
Die Funktion callback wird also aufgerufen, während width = $(window).width(), sodass sie nicht in die if-Bedingung eingeht und innerhalb der Funktion nichts passiert.
Wenn Sie versuchen, etwas an der Konsole zu protokollieren oder eine Nachricht zu Beginn Ihrer Funktion zu warnen, werden Sie feststellen, dass sie ausgeführt wird:
var callback = function() {
console.log("Callback entered !!!");
if ($(window).width() != width) {
if ($window.width() < 756) {
$(".content_lower.collapse").removeClass('in');
} else {
$(".content_lower.collapse").addClass('in');
}
}
};
BEARBEITEN:
Wenn Sie es dennoch beim Laden von Dokumenten ausführen möchten, können Sie ein boolesches Flag hinzufügen, das mit false initialisiert wurde, und es auf true setzen, wenn die Fenstergröße einmal geändert wurde, und dann damit testen:
var $window = $(window);
var width = $(window).width();
var called = false;
var callback = function() {
console.log("callback entered !!!");
if ($(window).width() != width || !called) {
if ($window.width() < 756) {
$(".content_lower.collapse").removeClass('in');
} else {
$(".content_lower.collapse").addClass('in');
}
}
called = true;
};
$(document).ready(callback);
$(window).resize(callback);
console.log(callback.toString());<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content_lower.collapse">the div</div>BEARBEITEN 2:
Ein besserer Ansatz besteht darin, das boolesche Flag als Parameter der Funktion callback zu verwenden und es beim Laden des Dokuments mit false und beim Ändern der Fenstergröße mit true aufzurufen:
var $window = $(window);
var width = $(window).width();
var callback = function(resized) {
if ($(window).width() != width || !resized) {
if ($window.width() < 756) {
$(".content_lower.collapse").removeClass('in');
} else {
$(".content_lower.collapse").addClass('in');
}
}
};
$(document).ready(callback(false));
$(window).resize(callback(true));
Dies ergab den gewünschten Effekt. Panzer für die Helfer.
var $window = $(window);
var width = $(window).width();
var callback = function () {
if ($window.width() < 756) {
$(".content_lower.collapse").removeClass('in');
}
else {
$(".content_lower.collapse").addClass('in');
}
};
$(document).ready(callback);
$( window ).resize(function() {
if($(window).width() != width){
callback();
}
});
Wenn das Dokument geladen wird, wird die Variable width auf Ihre Fensterbreite eingestellt (sagen wir 500px). Dann wird geprüft, ob die aktuelle Fensterbreite (also 500px) der width var (500 !== 500) entspricht. Dies gibt false zurück, sodass Ihr Code nicht ausgeführt wird. Sie können dies stattdessen tun:
var callback = function() {
if ($(window).width() < 756) {
$('body').text($(window).width() + " - if");
} else {
$('body').text($(window).width() + " - else");
}
};
$(document).ready(callback);
$(window).resize(callback);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>