borisbaer: jQuery add/removeClass: Geht das auch einfacher?

Beitrag lesen

problematische Seite

Hallo zusammen,

ich arbeite hier an einer interaktiven Karte, bei der ich mit meinen (sehr bescheidenen jQuery-Kenntnissen) Skalierungsmöglichkeiten und ab einem bestimmten Viewport eine Vollbild-Funktion implementiert habe.

Für den Vollbild-Modus habe ich folgendes Script verwendet:

$("body").on("click", ".enter-fullscreen", function(){
	$('#map-fullscreen button').removeClass('enter-fullscreen');
	$('#map-fullscreen button').addClass('exit-fullscreen');
	$("body").css({"margin": "0"});
	$("header").css({"display": "none"});
	$("footer").css({"display": "none"});
	$("main").css({"margin": "0"});
	$("h1").css({"display": "none"});
	$("#map-container").css({"margin": "0", "padding": "0"});
	$("#abc").css({"height": "100vh"});
});
$("body").on("click", ".exit-fullscreen", function(){
	$('#map-fullscreen button').removeClass('exit-fullscreen');
	$('#map-fullscreen button').addClass('enter-fullscreen');
	$("body").css({"margin": "0 0 10px 0"});
	$("header").css({"display": "block"});
	$("footer").css({"display": "block"});
	$("main").css({"margin": "20px auto 116px auto"});
	$("h1").css({"display": "block"});
	$("#map-container").css({"margin": "10px 0", "padding": "10px"});
	$("#abc").css({"height": "59.5vh"});
});

Ich habe mich nun gefragt, ob man diese Vollbild-Funktion so umsetzen sollte bzw. ob das auch einfacher geht.

Für die Skalierungsmöglichkeiten habe ich ein ähnliches Script verwendet:

$('#btn-scale-1').click(function(){
	$('#map').removeClass();
	$('#map-wrapper').removeClass();
	$('#map-scaling button').removeClass();
	$('#map').addClass('scale-1');
	$('#map-wrapper').addClass('scale-1');
	$('#btn-scale-1').addClass('selected');
	$('.MT-container').removeClass('larger-scale');
	$('.MT-container a').removeClass('larger-scale');
	$('.MT-container .divider').removeClass('larger-scale');
	$('.MT-container .tag').removeClass('larger-scale');
});

Für jede Skalierungsstufe erfolgt ein solches Skript.

Es werden folglich hauptsächlich viele classes ausgetauscht. Es funktioniert zwar, doch ich wollte eure Meinung zu dem Ganzen hören.

Vielen Dank für eure Zeit!

Boris

akzeptierte Antworten