kostenloser Webspace werbefrei: lima-city

jquery Selektoren mit gleichem Prefix zusammenfassen?

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   staymyfriend

   

   staymyfriend hat kostenlosen Webspace.

   17:19, 2.3.2014

   Hallo,
   
   ich habe auf einer Seite eine Navigation mit jquery erstellt. Da die Funktionen der Buttons identisch sind und diese auch den gleichen Prefix haben, möchte ich gerne eine "universelle" Funktion schreiben. Leider scheitern bislang alle Versuche...
   

   $(document).ready(function() {
   
   [...]
   
   	$('#bn_stream').click(function() {
   		if ($('#screen-container').data('channel') != 'stream') {
   			$('#channel-' + $('#screen-container').data('channel')).fadeOut('slow', function() {
   				$('#screen-container').data('channel', 'stream');
   				$('#channel-' + $('#screen-container').data('channel')).fadeIn('slow');
   			});
   		};
   		if ($('#media').hasClass('off')) {
   			$('#media').removeClass('off');
   			$('#channel' + $('#screen-container').data('channel')).fadeIn('slow');
   		};
   	});                                               
   
   	$('#bn_shedule').click(function() {
   		if ($('#screen-container').data('channel') != 'shedule') {
   			$('#channel-' + $('#screen-container').data('channel')).fadeOut('slow', function() {
   				$('#screen-container').data('channel', 'shedule');
   				$('#channel-' + $('#screen-container').data('channel')).fadeIn('slow');
   			});
   		};
   		if ($('#media').hasClass('off')) {
   			$('#media').removeClass('off');
   			$('#channel' + $('#screen-container').data('channel')).fadeIn('slow');
   		};
   	});                                               
   
   	$('#bn_shoutbox').click(function() {
   		if ($('#screen-container').data('channel') != 'shoutbox') {
   			$('#channel-' + $('#screen-container').data('channel')).fadeOut('slow', function() {
   				$('#screen-container').data('channel', 'shoutbox');
   				$('#channel-' + $('#screen-container').data('channel')).fadeIn('slow');
   			});
   		};
   		if ($('#media').hasClass('off')) {
   			$('#media').removeClass('off');
   			$('#channel-' + $('#screen-container').data('channel')).fadeIn('slow');
   		};
   	});                                               
   
   	$('#bn_info').click(function() {
   		if ($('#screen-container').data('channel') != 'info') {
   			$('#channel-' + $('#screen-container').data('channel')).fadeOut('slow', function() {
   				$('#screen-container').data('channel', 'info');
   				$('#channel-' + $('#screen-container').data('channel')).fadeIn('slow');
   			});
   		};
   		if ($('#media').hasClass('off')) {
   			$('#media').removeClass('off');
   			$('#channel-' + $('#screen-container').data('channel')).fadeIn('slow');
   		};
   	});                                               
   
   });

   
   Schon einmal vielen Dank...

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. djglycerin

   

   djglycerin hat kostenlosen Webspace.

   23:30, 9.3.2014

   Hallo,
   
   du meinst so etwas wie:
   
   

   $('div[id^="bn_"]').click(function() {
   ...
   }

   
   ?
   (Anmerkung: ungetestet )
   
   Gruß
   
   Beitrag zuletzt geändert: 9.3.2014 23:31:41 von djglycerin

4. programtools

   programtools hat kostenlosen Webspace.

   13:46, 10.3.2014

   Hi,
   
   mit jQuery hast du viele verschiedenen Möglichkeiten.
   Schau einmal hier: https://api.jquery.com/category/selectors/
   
   Was du brauchst, ist das, was auch djglycerin schon angesprochen hat, alle Elemente die ein Attribut besitzen, dessen Wert mit einer festgelegten Zeichenkette anfängt.
   
   Das Muster ist dann:

   Element[b][[/b]Attribut[b][u]^[/u]="[/b]AnfangDesWertes[b]"][/b]

   
   
   das ^vor dem = besagt, dass das Attribut nicht den Wert haben, sondern lediglich der Wert mit der gleichen zeichenkette beginnen muss.
   
   Grüße
   
   Beitrag zuletzt geändert: 10.3.2014 13:46:50 von programtools
5. Autor dieses Themas

   staymyfriend

   

   staymyfriend hat kostenlosen Webspace.

   12:41, 11.3.2014

   Vielen Dank für den Schubser in die richtige Richtung... habe das nun wie folgt gelöst:
   

   $('div[id^="bn_"]').click(function() {
   	var btn = $(this).attr('id').replace('bn_', '');
   	switch (btn) {
   }

   Funktioniert!!!

6. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?