jQuery - aufrufende Class ermitteln

k3nguruh

Erfahrenes Mitglied
Hallo,

ich möchte gerne die Class ermitteln mit der eine Funktion aufgerufen wurde.
HTML:
<span class="class-eins class-zwei class-eins-trigger">Eins</span>
<span class="class-eins class-zwei class-zwei-trigger">Zwei</span>

<div class="class-eins-target"></div>
<div class="class-zwei-target"></div>
Javascript:
$('.class-xxx-trigger').function() {
    // Hier sollte jetzt .class-xxx-trigger (besser ohne . ausgegeben werden
    var trigger_class = ???;
    var target_class = trigger_class.replace('trigger', 'target');
    var $target = $('.' + target_class);
}
Im Endeffekt soll dann aus class-xxx-trigger class-xxx-target werden, wobei class-xxx-trigger auch mal xxxx-xxx-trigger usw. sein kann.

Was mir jetzt so einfällt wäre, dass ich in $(this).attr('class') nach dem Teil-String "-trigger" suche und dann den kompletten String (class-xxx-trigger) ersetze.
Aber das suchen könnte man sich sparen, wenn ich die Funktion aufrufende Class ermitteln kann.
Gibt es sowas?
 
Zuletzt bearbeitet:
Hi
Also $("...").function() { } gibts so nicht.. aber ich nehme an du willst das einfach als Platzhalter für irgendeine jQuery Funktion?
Die Klasse bekommst du mit: $(this).attr("class"). Dabei bekommst du aber alle Klassen.
Ich bin nicht sicher ob du zB in einer each Schleife auf den Selector zugreiffen kannst.
Du könntest aber den Triggerstring im HTML Objekt als data-Element speichern, oder alle Klassen durchgehen und schauen ob trigger im Name vorkommt.
 
Klingt komisch was du machen willst - kannst du das Ganze mal vor einem größeren Hintergrund beschreiben, was du da machen willst? (Losgelöst jetzt von diesem speziellen Problem.)
 
Hallo,

also ich dachte mir folgendes (vereinfachtes Beispiel):
Auf der Seite sind an unterschiedlichen Stellen <span> Tags und die sollen mit einer jQuery Funktion angesprochen werden.
HTML:
// .... (Irgend ein Content)
<span class="blubber-xyz-target">Blubber 1 .....</span>
// .... (Irgend ein Content)
<span class="blubber-abc-target">Blubber 2 .....</span>
// .... (Irgend ein Content)
<span class="blubber-abc-trigger">Trigger 2 .....</span>
<span class="blubber-xyz-trigger">Trigger 1 .....</span>
Dann wollte ich einmal eine jQuery-Funktion einbinden, die zum Bsp. bei einem Klick das Ziel versteckt.
PHP:
$('span[class$="-trigger"]').on('click', function(){
   // Bei Klick auf blubber-abc-trigger
   $('.blubber-abc-target').hide();
   
   // Bei Klick auf blubber-xyz-trigger
   $('.blubber-xyz-target').hide();
   
   // usw.
});
ohne jedesmal
PHP:
$('.blubber-abc-trigger"]').on('click', function(){
   $('.blubber-abc-target').hide();
});
 
$('.blubber-xyz-trigger"]').on('click', function(){
   $('.blubber-xyz-target').hide();
}); 

// usw.
zu schreiben.
 
Hi,

reicht es dir nicht, wenn du innerhalb des click-Handlers das Element versteckst, auf das this referenziert?
Javascript:
$('span[class$="-trigger"]').on('click', function(){
   $(this).hide();
});

Ciao
Quaese
 
Hi,

wenn sich die Klassennamen von trigger und target wirklich nur im letzten Teil unterscheiden, kannst du mit regulären Ausdrücken arbeiten. Gibt es Treffer, so ersetzt du im Klassenname des Triggers den letzten Teil durch target.

Beispiel:
Javascript:
    $('span[class$="-trigger"]').on('click', function(){
        // regulären Ausdruck der Form xxx-trigger auf das class-Attribut anwenden
        var result = /(^| )([a-zA-Z-]+trigger)/.exec(this.className),
            classname;

        // falls es Treffer gibt
        if(result){
            // "trigger" innerhalb des gefundenen Klassennamens durch "target" ersetzen
            classname = result[2].replace(/trigger/, "target");
        }

        $('.' + classname).hide();
    });

Ciao
Quaese
 
Zurück