jQuery unbekannter ID unbekannte Classe entfernen mit RegEx

[KasselJulian]

Hi,

ich habe ein Problem. Ich vereinfache mein Codebeispiel mal:
In einem rechten Div-Tag habe ich mehrere Elemente.
In einem linken Div-Tag habe ich die dazugehörigen Namen der Elemente. Auf Klick eines Namens soll das jeweilige Element auf der rechten Seite rot hinterlegt werden. Dies funktioniert gegenwärtig mit einer .active-Klasse. Sie wird auf Klick gesetzt.
Nun kann es jedoch sein, dass der Besucher zuvor schon auf einen anderen Namen geklickt hat und so könnte es passieren, dass zwei oder mehr Elemente auf einmal rot hinterlegt sind. Das möchte ich verhindern, indem ich alle .active-Klassen bei den jeweiligen Elementen zuvor lösche.
Jedes Element das rechts rot hervorgehoben wird hat eine ID. Die ID ist mit einem Präfix gekennzeichnet, z.B. element_"smile" oder "element_cool", jedoch nicht nummerisch.

Nun möchte ich also die .Klasse (die ebenfalls mit einem Präfix funktioniert) z.B. "active_heyho" auf Klick eines Elements aus der linken Div-Box bei allen Elementen aus der rechten Div-Box mit der ID "element_[nicht bekannt]" entfernen.
Gibt es dafür eine Möglichkeit?

Cheers

 

[Myhar]

AW: jQuery unbekannter ID unbekannte Classe entfernen mit RegEx

Kannst du einen dummy HTML Code posten, an dem man sich dein Beispiel anschauen kann? Ich werde aus der Beschreibung nicht ganz schlau.

 

[fakerer]

AW: jQuery unbekannter ID unbekannte Classe entfernen mit RegEx

ich habs auch nicht ganz verstanden,
aber ich denke $(this) ist was du suchst damit kannst dir die id des angeklickten teils auslesen und damit weiterarbeiten

 

[hub]

AW: jQuery unbekannter ID unbekannte Classe entfernen mit RegEx

Moin moin,
es gibt eine Lösung, in dem du auf der rechten Seite alle 'activ' entfernst bis auf ...

$( ... ).bind('click', function () {
  var aktuellerDiv = $(this).val() // oder html(),wie halt dein Code aussieht
  // alle 'activ' raus ausser ...
  $('#recherDiv div').not('#' + aktuellerDiv).removeClass('activ');
  // setzen, falls noch nicht gesetzt
  $('#' + aktuellerDiv).addClass('activ');
});

Ist nur das Prinzip. Wie es genauer aussehen würde, hängt von deinem Code ab. Wäre gut, du zeigst uns den relevanten Teil ...

Gruß Ulli

 

[Duddle]

AW: jQuery unbekannter ID unbekannte Classe entfernen mit RegEx

Klitzekleiner Verbesserungsvorschlag:

$( ... ).bind('click', function () {
  var aktuellerDiv = $(this).val() // oder html(),wie halt dein Code aussieht
  // alle 'activ' raus 
  $('#recherDiv div').removeClass('activ');
  // setzen
  $('#' + aktuellerDiv).addClass('activ');
});

Wenn sowieso die Klasse zugewiesen wird, kann sie auch eine Nanosekunde lang ohne sie leben - und der Code wird ein Müh lesbarer.


Duddl

 

[hub]

AW: jQuery unbekannter ID unbekannte Classe entfernen mit RegEx

@duddle: Jo, dein Vorschlag ist bedingungslos akzeptiert - mein Vorschlag bezieht sich auch auf die "lahme Kiste" und erspart dir das flackern beim Aus- und wieder Einschalten wenn schon aktiv. Bei der Geschwindigkeit hast du recht (Ich bin zur Zeit in einem Land unterwegs, die fangen gerade erst richtig an mit dem Internet - darum auch die Rücksicht darauf ...).

OT: Diesmal bin ich nicht schuld. Du hast dich vertippt - keine 2 o's aber dafür kein e

Gruß Ulli

 

[KasselJulian]

AW: jQuery unbekannter ID unbekannte Classe entfernen mit RegEx

Hi und danke für die Bemühung,

also es ist so, dass ich eine Funktion habe die alle halbe Sekunde angesprochen wird. Diese Funktion soll nun überprüfen, ob ein Klick auf einen Div-Tag, der z.B. die ID "#xyz_psd" haben könnte, festgestellt wurde.
Das Problem dabei ist, dass es auch sein kann das die Div ID "#xyz_pups" oder "#xyz_banane" sein kann, das ist nicht definiert. Deshalb muss ich da doch mit Regular Exeptions arbeiten oder?
Also es soll festgestellt werden, ob ein Klick auf eine ID, die nur mit einem Präfix am Anfang festgemacht werden kann, festgestellt wurde.
Tut mir leid wenn ich mich vielleicht nicht klar genug ausgedrückt habe.

//EDIT:
Oder ich arbeite gleich am Anfang mit einer Regular Exeption, sodass es z.B. $('#praefix_VARIABEL').click... heißt.

 

[Duddle]

AW: jQuery unbekannter ID unbekannte Classe entfernen mit RegEx

Entweder verstehe ich dein Anliegen falsch oder du gehst die Sache inkorrekt an, weil

es ist so, dass ich eine Funktion habe die alle halbe Sekunde angesprochen wird

sehr suspekt klingt.

Wenn du auf den Klick auf ein Element reagieren willst, bindest du ganz normal den onclick-Event-Handler an das Element. Wenn der für mehrere Elemente gleich ist, bindest du ihn an alle infrage kommenden Elemente (per Klasse oder einem anderem, geschickten Selektor). Wenn innerhalb dieses Event-Handlers auf irgendeine Eigenschaft des Elementes (ID o.ä.) geachtet werden muss, dann fragst du diese Eigenschaft im Handler ab und reagierst entsprechend.

Den Zug zum regulären Ausdruck verstehe ich ebenfalls nicht. Wenn es Elemente mit IDs im Format "foo_irgendwas" gibt, die entsprechend andere Elemente mit IDs "bar_irgendwas" beachten müssen, dann musst du doch nur "foo_" abschneiden und den Rest an "bar_" hängen um das korrekte Element zu erhalten.


Duddle

 

[KasselJulian]

AW: jQuery unbekannter ID unbekannte Classe entfernen mit RegEx

Hi Duddle,

danke für deine Antwort.
Das mit

Wenn du auf den Klick auf ein Element reagieren willst, bindest du ganz normal den onclick-Event-Handler an das Element. Wenn der für mehrere Elemente gleich ist, bindest du ihn an alle infrage kommenden Elemente (per Klasse oder einem anderem, geschickten Selektor). Wenn innerhalb dieses Event-Handlers auf irgendeine Eigenschaft des Elementes (ID o.ä.) geachtet werden muss, dann fragst du diese Eigenschaft im Handler ab und reagierst entsprechend.

leuchtet mir ein, das ist das was ich in "//EDIT" in meinem letzten Post meinte. Bisher konnte ich das nicht machen und ich erkläre dir gleich wieso nicht.

Den Zug zum regulären Ausdruck verstehe ich ebenfalls nicht. Wenn es Elemente mit IDs im Format "foo_irgendwas" gibt, die entsprechend andere Elemente mit IDs "bar_irgendwas" beachten müssen, dann musst du doch nur "foo_" abschneiden und den Rest an "bar_" hängen um das korrekte Element zu erhalten.

Also, es ist so. Stell dir eine Tabelle (nur bildlich gemeint) mit zwei Spalten vor. Auf der linken Spalte hast du eine Select-Menü (<select ..>) und auf der rechten Spalte eine Liste mit Elementen.
Auf Klick eines Elements in der Liste in der rechten Spalte, soll das dazugehörige Option-Field im Select-Menü aus der linken Spalte selektiert werden.
Nun, es sind um die 100 Elemente und deshalb auch exakt gleich viele Optionen im Select-Menü. Jedes Element hat eine andere ID. Da ich nicht Lust habe für jedes Element einen Parameter an eine Funktion zu übergeben, damit ich weiß, welches Option Field selektiert werden muss, möchte ich das mit RegEx machen.

Also, auf Klick irgendeines Elements in der rechten Spalte, soll das jeweilige Option Field im Select-Menü in der linken Spalte selektiert werden. Ich muss also prüfen, ob ein Click-Event auf eine ID die "#xyz_" am Anfang enthält, ausgelöst wurde (so fangen die IDs in der Liste an). Das ist eigentlich schon alles, es ist nur schwierig zu erklären finde ich.

Cheers

 

[Duddle]

AW: jQuery unbekannter ID unbekannte Classe entfernen mit RegEx

Wie gesagt: hol dir die notwendige Eigenschaft, schneid das jeweils gleiche ab um das eindeutige zu kennen, dann hol das entsprechende Element.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title></title>
	<script src="js/jquery.js" type="text/javascript"></script>
	<script type="text/javascript">
	    $(document).ready(function() {
		$("li[name^='sp_']").click(function() {
		    var n = $(this).attr("name").substr(3);
		    var o = $("option[name='opt_"+n+"']");
		    o.prop('selected', true);

		    //alternativ: $("#mySelect").val(n);
		});
	    });
	</script>
    </head>
    <body>
	<form action="">
	    <select id="mySelect" name="" multiple>
		<option name="opt_1" value="1">1</option>
		<option name="opt_2" value="2">2</option>
		<option name="opt_3" value="3">3</option>
	    </select>
	</form>
	<hr />
	<ol>
	    <li name="sp_1">Bla 1</li>
	    <li name="sp_2">Bla 2</li>
	    <li name="sp_3">Bla 3</li>
	</ol>
    </body>
</html>

In dieser Variante können mehrere Elemente im <select> ausgewählt (und noch nicht abgewählt) werden, aber du solltest das Prinzip erkennen und es erweitern können. Auskommentiert ist ein alternativer Weg, der exakt das Element selektiert welches den übergebenen Wert hat.


Duddle

 

[KasselJulian]

AW: jQuery unbekannter ID unbekannte Classe entfernen mit RegEx

Danke! Das war meine Rettung.