[FRAGE] Wie kann ich den Code kleiner machen

[overhead]

Hallo leute ich bin echt ganz neu hier und habe ein Frage wie ich einen Code klein machen kann, damit er nicht ewig lang wird.

var options = $$('.g1 #opt_572_0'); 
options.addEvent('change', function() { 
	if(this.checked) { 
		$('l2').addClass('invisible');
		$('l3').addClass('invisible');
	} 
		else { 
			$('l2').removeClass('invisible');
			$('l3').removeClass('invisible');
		} 
		
});

var options = $$('.g1 #opt_572_1'); 
options.addEvent('change', function() { 
	if(this.checked) { 
		$('l1').addClass('invisible');
		$('l3').addClass('invisible');
	} 
		else { 
			$('l1').removeClass('invisible');
			$('l3').removeClass('invisible');
		} 
		
});
	
var options = $$('.g1 #opt_572_2'); 
options.addEvent('change', function() { 
	if(this.checked) { 
		$('l1').addClass('invisible');
		$('l2').addClass('invisible');
	} 
		else { 
			$('l1').removeClass('invisible');
			$('l2').removeClass('invisible');
		} 
		
});

Würde mich freuen wenn Ihr mir helfen könntet.

 

[Dormilich]

welche library verwendest du? (davon hängt ab, was man machen kann).

prinzipiell wäre das Ziel, die einzelnen Event Handler durch eine Factory zu erzeugen oder die variablen Daten entweder über den event oder das Element zu bekommen.

 

[overhead]

Ich verwende mootools ich hoffe da kann mir einer helfen.

 

[Dormilich]

Das erste, was man machen kann, ist die einzelnen Aufrufe zusammenfassen.

$$('l2, l3').addClass('invisible');

damit reduziert sich der Unterschied auf einen String – den man z.B. aus den data-Attributen bekommen kann.

Das könnte dann so aussehen:

<button type="button" data-ref="#a, #b">click</button>
<button type="button" data-ref="#a, #c">click</button>

$$('button').addEvent('click', function (evt) {
    $$(this.dataset.ref).addClass('clicked');
});

 

[overhead]

achso wegen dem Button, wollte ich dir nur mal mitteilen das die verschiedene Checkboxen sind also die "opt" ist die ID der Checkbox da ich definitiv 3 Checkboxen benötige, oder in anderen Fällen sogar mehr.

 

[Dormilich]

der Button dient nur als Demo, um zu zeigen wie’s geht. Es dürfte dir mit diesem Beispiel sicher nicht schwer fallen, das Prinzip auf deine Checkboxen zu übertragen.

kleiner Tip noch: in .g1 #opt_572_0 ist .g1 unnötig, da IDs immer eindeutig sind.