jquery Selektoren mit gleichem Prefix zusammenfassen?

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

Autor dieses Themas

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...

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage
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
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
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!!!
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

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

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city