jQuery Select blendet alles mit entsprechender Klasse ein, bei Änderung aber andere verstecken

Johnnii360

Erfahrenes Mitglied
Servus zusammen!

Ich häng schon seit gestern wieder an einem anderen Problem fest und komm einfach nicht dahinter. Ich hab schon einiges mit :not(), fadeToggle() usw. ausprobiert, aber nichts hat funktioniert. Google kann mir da leider auch nicht weiterhelfen.

Problembeschreibung:
Ich habe hier ein Selectmenü, das mir sämtliche Elemente einblenden soll (fadeIn) welche die gewählte Klasse enthalten. Das Bedeutet: Ausgewählter Text im Selectmenü entspricht dem Klassennamen. Wird jetzt aber eine Klasse ausgewählt, die nicht in den Elementen vorhanden sind, dann sollten diese ausgeblendet werden - also wie Toggle.
Beispiel: Der Wert "Projekt", zeigt mir alle Elemente mit der Klasse Projekt an. Wähle ich jetzt z.B. Service, sollen alle Elemente ausgeblendet werden die nicht Service enthalten. Leider etwas schwierig. Die Klasse wird nur in p, input und label Elementen verwendet - alles in einem form. Mach ich aber nun $("p + input + label").not(".KLASSENNAME"), dann kann es sein, dass auch andere Sachen ausgeblendet werden, die nicht ausgeblendet werden sollen.

Hier der jQuery-Code:
Javascript:
$(function(){
    $("#vorgang").selectmenu({
        select: function(){
            var SelectMenuText = $(this).find("option:selected").text();
            $("." + SelectMenuText).fadeIn();
        }
    });
});

Das Selectmenü (mittels jQueryUI):
HTML:
<label for="vorgang">Vorgangstyp</label>
<select id="vorgang" name="vorgang">
    <option disabled value="none" selected>&nbsp;</option>
    <option>Projekt</option>
    <option>Intern</option>
    <option>OP</option>
    <option>Service</option>
    <option>RMA</option>
</select>

Und so sähe jetzt ein Element-Gespann aus:
HTML:
<label for="hersteller" style="display: none;" class="RMA Service">Hersteller</label>
<input type="text" id="hersteller" name="hersteller" value="" style="display: none;" class="text ui-content RMA Service">

Die Elemente werden erstmal anfangs ausgeblendet, bis man was aus dem Selectmenü wählt.
 
Mach ich aber nun $("p + input + label").not(".KLASSENNAME"), dann kann es sein, dass auch andere Sachen ausgeblendet werden, die nicht ausgeblendet werden sollen.
Weiß nicht genau, ob ich dich richtig verstehe. Sind die "anderen Sachen" die, die eingeblendet werden sollen, weil der Text gleich dem Klassennamen ist?
Dann würde es doch reichen, wenn Du das ausblenden vor dem Einblenden machen würdest:
Javascript:
$("p + input + label").not("." + SelectMenuText).fadeOut();
$("." + SelectMenuText).fadeIn();
Oder so:
Javascript:
$("p + input + label").each(function() {
    if ($(this).hasClass(SelectMenuText)) $(this).fadeIn();
    else $(this).fadeOut();
})
Wenn Du mit "andere Sachen" jedoch ander Elemente auf der ganzen Seite meinst, die nicht bei diesem Verfahren berücksichtigt werden sollen, würde ich vorschlagen, dass Du den Elementen, die berücksichtigt werden sollen, eine weitere Klasse gibst und entsprechend abfragst. Oder Du beziehtst die ID deines Formulars in die Selektoren ein.
 
Zuletzt bearbeitet:
Wenn Du mit "andere Sachen" jedoch ander Elemente auf der ganzen Seite meinst, die nicht bei diesem Verfahren berücksichtigt werden sollen, würde ich vorschlagen, dass Du den Elementen, die berücksichtigt werden sollen, eine weitere Klasse gibst und entsprechend abfragst. Oder Du beziehtst die ID deines Formulars in die Selektoren ein.
Genau, das meinte ich. :) Ja das mit der zusätzlichen Klasse wäre eine Möglichkeit. Das Problem mit der Lösung zum Einbeziehen der Form-ID ist jedoch, dass das Form um einen Tabs-Teil von jQUI geht und in dem Form auch noch drei Dinge sind, die nicht ausgeblendet werden sollen.

Vielleicht wäre es eine Idee dann den gerade eingeblendeten Elementen z.B. die Klasse ElementIsVisible zu verpassen. Wenn ich jetzt was anderes Auswähle checke ich die Elemente mit der zusätzlichen Klasse und lasse alles mit dieser ausblenden. Problem nur: RMA und Service haben die die gleiche Klasse. Nur bei einem der beiden kommen noch ein paar Extraelemente mit hinzu. Erkennt das Script aber, dass da die Extraklasse mit drin ist, dann wir das Script sicher alle anderen Elemente ausblenden und nur die Extraelemenete einblenden. Ein fliegender Wechsel sozusagen.

Könnte man nicht evtl. alle mit der Basisklasse (RMA, Service, Intern etc.) bei einer Neuwahl nicht erstmal wieder ausblenden und dann alle die der neuen Auswahl entsprechen? Sozusagen ein "Refresh" der Elemente. :) Ich wüsste nur leider im Moment nicht wie.
 
Das Problem mit der Lösung zum Einbeziehen der Form-ID ist jedoch, dass das Form um einen Tabs-Teil von jQUI geht und in dem Form auch noch drei Dinge sind, die nicht ausgeblendet werden sollen.
Dann geht es nicht mit der Form-ID. Die andere Lösung mit der zusätzlichen Klasse sollte jedoch funktionieren.
RMA und Service haben die die gleiche Klasse. Nur bei einem der beiden kommen noch ein paar Extraelemente mit hinzu.
Da es möglich ist, einem Element mehrere Klassen zu geben, würde ich diesen jeweils eine andere, zusätzliche Klasse nur für das Einblenden geben.
 
Zurück