Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 15 von 20

Thema: Hidden & Show

  1. #1
    The_C ist offline Routinier
    registriert
    01-08-2011
    Beiträge
    272

    Hidden & Show

    Hallo an die Experten,

    brauche mal wieder Hilfe, hab hier mal den HTML Code reingestellt weil er doch etwas länger ist.

    Nun zu meiner Frage:

    Im HTML Code ist jeder Block mit der class ummantel
    HTML-Code:
    <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-1 col-xxl-1">
    es sind genau 4 Blöcke.

    Der 1. Block soll immer auf der Seite sein der dient zur Auswahl um die anderen Blöcke ein und aus zu schalten darin sind 3 Auswahl Optionen die sollen die anderen Blöcke steuern und zwar so:

    HTML-Code:
    <option value="ÖNM">Starte bei Newcomers</option>
    soll nur den 2 Block erscheinen lassen.
    HTML-Code:
    <option value="ÖNM &amp; IÖM">Starte bei beiden Bewerben</option>
    soll alle Blöcke erscheinen lassen
    HTML-Code:
    <option value="IÖM">Starte bei Championships</option>
    soll nur den 3 Block und den 4 Block erscheinen lassen

    Wie kann man das mit JS oder jQuery umsetzen ich sehe da keine Möglichkeit weil alle class gleich heißen aber eventuell gibt es auch dafür eine Lösung weil ich kann den Code nicht verändern.

    Vielen Dank schon jetzt für Eure Hilfe
    Bildschirmfoto 2022-09-01 um 08.24.39.jpg

  2. #2
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.953

    AW: Hidden & Show

    Zitat Zitat von The_C Beitrag anzeigen
    Wie kann man das mit JS oder jQuery umsetzen ich sehe da keine Möglichkeit weil alle class gleich heißen aber eventuell gibt es auch dafür eine Lösung weil ich kann den Code nicht verändern.
    Was genau meinst du mit "ich kann den Code nicht verändern"?
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png

  3. #3
    The_C ist offline Routinier
    registriert
    01-08-2011
    Beiträge
    272

    AW: Hidden & Show

    keine eigenen classen zu den blöcken hinzufügen also das HTML darauf hab ich keinen Einfluß
    Hier hab ich ein Beispiel gefunden leider benötigt das auch eigene classen aber so sollte die Funktion sein nur mit meiner HTML Vorlage: https://jsfiddle.net/solodev/dpo07Ly5/
    Geändert von The_C (01-09-2022 um 11:28 Uhr)

  4. #4
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.953

    AW: Hidden & Show

    Wenn du auf das document nicht zugreifen kannst, wo würdest du den JS Code denn hin schreiben?
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png

  5. #5
    The_C ist offline Routinier
    registriert
    01-08-2011
    Beiträge
    272

    AW: Hidden & Show

    ich habe nur auf das formular keinen Zugriff aber auf das js schon

  6. #6
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.953

    AW: Hidden & Show

    Und wenn du den gezeigten Beispielcode versuchst in deinen Fall zu übernehmen, welche Fragen kommen dann hoch?
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png

  7. #7
    The_C ist offline Routinier
    registriert
    01-08-2011
    Beiträge
    272

    AW: Hidden &amp;amp;amp; Show

    wie setze ich das um wenn ich keine individuellen classen im html setzen kann.
    z.b das kann ich schon nicht machen id="otherFieldDiv":
    PHP-Code:
    <div class="form-group" id="otherFieldDiv"
    das einzige was sich bei meinem Code ändert ist das:
    PHP-Code:
    for="registration_membership-173-multiselect-2" 
    und die
    PHP-Code:
    id="registration_membership-173-multiselect-2" 

    Aber keine Ahnung ob ich das nutzen kann und wie das gemacht wird.

    HTML-Code:
    #otherFieldDiv
    das kann ich nicht machen.

    Hier mein Code den ich gebaut habe aber es stimmt nich sollte für den 2 Block sein:
    PHP-Code:
    $("#registration_membership-173-singleselect-8").change(function () {
        if ($(
    this).val() == "ÖNM") {
          $(
    '#otherFieldDiv').show();
          $(
    '#registration_membership-173-multiselect-2').attr('required''');
          $(
    '#registration_membership-173-multiselect-2').attr('data-error''This field is required.');
        } else {
          $(
    '#otherFieldDiv').hide();
          $(
    '#registration_membership-173-multiselect-2').removeAttr('required');
          $(
    '#registration_membership-173-multiselect-2').removeAttr('data-error');
        }
      });
      $(
    "#registration_membership-173-singleselect-8").trigger("change"); 
    Das sind die ersten 2 Blöcke:

    HTML-Code:
    <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-1 col-xxl-1">
        <div class="form-group">
            <label class="control-label" for="registration_membership-173-singleselect-8">Wettbewerb Auswahl</label>
            <div class="input">
                <select required="required" class=" form-control" id="registration_membership-173-singleselect-8"
                    name="tx_form_formframework[registration_membership-173][singleselect-8]">
                    <option value="ÖNM">Starte bei Newcomers</option>
                    <option value="ÖNM &amp; IÖM">Starte bei beiden Bewerben</option>
                    <option value="IÖM">Starte bei Championships</option>
                </select>
            </div>
        </div>
    </div>
    <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-1 col-xxl-1">
        <div class="form-group">
            <label class="control-label" for="registration_membership-173-multiselect-2">
                Newcomers Starklassen auswählen
            </label>
            <div class="input">
                <input type="hidden" name="tx_form_formframework[registration_membership-173][multiselect-2]"
                    value="" /><select required="required" class="xlarge form-control"
                    id="registration_membership-173-multiselect-2" multiple="multiple"
                    name="tx_form_formframework[registration_membership-173][multiselect-2][]">
                    <option value="NO">Starte nicht bei Newcomers</option>
                    <option value="Junioren Classic">Junioren Classic</option>
                    <option value="Bikini Fitness">Bikini Fitness</option>
                </select>
            </div>
        </div>
    </div>
    - - - Aktualisiert - - -

    Ich denke ich hab die Lösung:

    PHP-Code:
    $("#registration_membership-173-singleselect-8").change(function () {
        if ($(
    this).val() == "ÖNM") {
          $(
    '.rc_form__col:nth-child(2)').show();
          $(
    '#registration_membership-173-multiselect-2').attr('required''');
          $(
    '#registration_membership-173-multiselect-2').attr('data-error''This field is required.');
        } else {
          $(
    '.rc_form__col:nth-child(2)').hide();
          $(
    '#registration_membership-173-multiselect-2').removeAttr('required');
          $(
    '#registration_membership-173-multiselect-2').removeAttr('data-error');
        }
      });
      $(
    "#registration_membership-173-singleselect-8").trigger("change"); 
    - - - Aktualisiert - - -

    Nur leider erkennt er das nicht "ÖNM & IÖM" hier werden mir nicht alle 3 Elemente angezeigt gibt es dafür eine Lösung?
    Hab auch schon statt dem & ein &amp; probiert oder ist es der Abstand zwischen den Wörtern...

    PHP-Code:
    $("#registration_membership-173-singleselect-8").change(function () {
        if ($(
    this).val() == "ÖNM & IÖM") {
          $(
    '.rc_form__col:nth-child(2), .rc_form__col:nth-child(3), .rc_form__col:nth-child(4)').show();
          $(
    '#registration_membership-173-multiselect-2, #registration_membership-173-multiselect-3, id="registration_membership-173-singleselect-5"').attr('required''');
          $(
    '#registration_membership-173-multiselect-2,#registration_membership-173-multiselect-3, id="registration_membership-173-singleselect-5"').attr('data-error''This field is required.');
        } else {
          $(
    '.rc_form__col:nth-child(2), .rc_form__col:nth-child(3), .rc_form__col:nth-child(4)').hide();
          $(
    '#registration_membership-173-multiselect-2, #registration_membership-173-multiselect-3, id="registration_membership-173-singleselect-5"').removeAttr('required');
          $(
    '#registration_membership-173-multiselect-2, #registration_membership-173-multiselect-3, id="registration_membership-173-singleselect-5"').removeAttr('data-error');
        }
      });
      $(
    "#registration_membership-173-singleselect-8").trigger("change"); 
    - - - Aktualisiert - - -

    Nein das ist es leider auch nicht mit dem ÖNM & IÖM da stimmt irgendwas nicht mit dem Code sobald ich den mittleren Teil Einkommentiere werden mir der erste und der Letzte Code ignoriert und nur noch der einkommentierte funktioniert was ist den da falsch?

    Hier der ganze JS Code:
    PHP-Code:
    $("#registration_membership-173-singleselect-8").change(function () {
        if ($(
    this).val() == "ÖNM") {
          $(
    '.rc_form__col:nth-child(2)').show();
          $(
    '#registration_membership-173-multiselect-2').attr('required''');
          $(
    '#registration_membership-173-multiselect-2').attr('data-error''This field is required.');
        } else {
          $(
    '.rc_form__col:nth-child(2)').hide();
          $(
    '#registration_membership-173-multiselect-2').removeAttr('required');
          $(
    '#registration_membership-173-multiselect-2').removeAttr('data-error');
        }
      });
      $(
    "#registration_membership-173-singleselect-8").trigger("change");

      $(
    "#registration_membership-173-singleselect-8").change(function () {
        if ($(
    this).val() == "ÖNM & IÖM") {
          $(
    '.rc_form__col:nth-child(2), .rc_form__col:nth-child(3), .rc_form__col:nth-child(4)').show();
          $(
    '#registration_membership-173-multiselect-2').attr('required''');
          $(
    '#registration_membership-173-multiselect-3').attr('required''');
          $(
    '#registration_membership-173-singleselect-5').attr('required''');
          $(
    '#registration_membership-173-multiselect-2').attr('data-error''This field is required.');
          $(
    '#registration_membership-173-multiselect-3').attr('data-error''This field is required.');
          $(
    '#registration_membership-173-singleselect-5').attr('data-error''This field is required.');
        } else {
          $(
    '.rc_form__col:nth-child(2), .rc_form__col:nth-child(3), .rc_form__col:nth-child(4)').hide();
          $(
    '#registration_membership-173-multiselect-2').removeAttr('required');
          $(
    '#registration_membership-173-multiselect-3').removeAttr('required');
          $(
    '#registration_membership-173-singleselect-5').removeAttr('required');
          $(
    '#registration_membership-173-multiselect-2').removeAttr('data-error');
          $(
    '#registration_membership-173-multiselect-3').removeAttr('data-error');
          $(
    '#registration_membership-173-singleselect-5').removeAttr('data-error');
        }
      });
      $(
    "#registration_membership-173-singleselect-8").trigger("change");

      $(
    "#registration_membership-173-singleselect-8").change(function () {
        if ($(
    this).val() == "IÖM") {
          $(
    '.rc_form__col:nth-child(3), .rc_form__col:nth-child(4)').show();
          $(
    '#registration_membership-173-multiselect-3').attr('required''');
          $(
    '#registration_membership-173-singleselect-5').attr('required''');
          $(
    '#registration_membership-173-multiselect-3').attr('data-error''This field is required.');
          $(
    '#registration_membership-173-singleselect-5').attr('data-error''This field is required.');
        } else {
          $(
    '.rc_form__col:nth-child(3), .rc_form__col:nth-child(4)').hide();
          $(
    '#registration_membership-173-multiselect-3').removeAttr('required');
          $(
    '#registration_membership-173-singleselect-5').removeAttr('required');
          $(
    '#registration_membership-173-multiselect-3').removeAttr('data-error');
          $(
    '#registration_membership-173-singleselect-5').removeAttr('data-error');
        }
      });
      $(
    "#registration_membership-173-singleselect-8").trigger("change"); 
    Geändert von The_C (01-09-2022 um 16:04 Uhr)

  8. #8
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.953

    AW: Hidden &amp;amp;amp; Show

    Der hinzugefügte Code muss im selben Zeichensatz gespeichert werden wie der schon bestehende.
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png

  9. #9
    The_C ist offline Routinier
    registriert
    01-08-2011
    Beiträge
    272

    AW: Hidden &amp;amp;amp;amp;amp; Show

    Sorry verstehe ich nicht kannst mir den Mittelteil zeigen wie der aussehen muss?
    Das geht auch nicht Ka. was du meinst.
    PHP-Code:
    $("#registration_membership-173-singleselect-8").change(function () {

        if ($(
    this).val() == "ÖNM") {
          $(
    '.rc_form__col:nth-child(2)').show();
          $(
    '#registration_membership-173-multiselect-2').attr('required''');
          $(
    '#registration_membership-173-multiselect-2').attr('data-error''This field is required.');
        } else {
          $(
    '.rc_form__col:nth-child(2)').hide();
          $(
    '#registration_membership-173-multiselect-2').removeAttr('required');
          $(
    '#registration_membership-173-multiselect-2').removeAttr('data-error');
        };

        if ($(
    this).val() == "ÖNM & IÖM") {
          $(
    '.rc_form__col:nth-child(2), .rc_form__col:nth-child(3), .rc_form__col:nth-child(4)').show();
          $(
    '#registration_membership-173-multiselect-2').attr('required''');
          $(
    '#registration_membership-173-multiselect-3').attr('required''');
          $(
    '#registration_membership-173-singleselect-5').attr('required''');
          $(
    '#registration_membership-173-multiselect-2').attr('data-error''This field is required.');
          $(
    '#registration_membership-173-multiselect-3').attr('data-error''This field is required.');
          $(
    '#registration_membership-173-singleselect-5').attr('data-error''This field is required.');
        } else {
          $(
    '.rc_form__col:nth-child(2), .rc_form__col:nth-child(3), .rc_form__col:nth-child(4)').hide();
          $(
    '#registration_membership-173-multiselect-2').removeAttr('required');
          $(
    '#registration_membership-173-multiselect-3').removeAttr('required');
          $(
    '#registration_membership-173-singleselect-5').removeAttr('required');
          $(
    '#registration_membership-173-multiselect-2').removeAttr('data-error');
          $(
    '#registration_membership-173-multiselect-3').removeAttr('data-error');
          $(
    '#registration_membership-173-singleselect-5').removeAttr('data-error');
        };

        if ($(
    this).val() == "IÖM") {
          $(
    '.rc_form__col:nth-child(3), .rc_form__col:nth-child(4)').show();
          $(
    '#registration_membership-173-multiselect-3').attr('required''');
          $(
    '#registration_membership-173-singleselect-5').attr('required''');
          $(
    '#registration_membership-173-multiselect-3').attr('data-error''This field is required.');
          $(
    '#registration_membership-173-singleselect-5').attr('data-error''This field is required.');
        } else {
          $(
    '.rc_form__col:nth-child(3), .rc_form__col:nth-child(4)').hide();
          $(
    '#registration_membership-173-multiselect-3').removeAttr('required');
          $(
    '#registration_membership-173-singleselect-5').removeAttr('required');
          $(
    '#registration_membership-173-multiselect-3').removeAttr('data-error');
          $(
    '#registration_membership-173-singleselect-5').removeAttr('data-error');
        };
        
      });
      $(
    "#registration_membership-173-singleselect-8").trigger("change"); 
    - - - Aktualisiert - - -

    Und das funktioniert auch nicht :
    der erste zeigt nix an
    der zweite zeigt zeigt eines obwohl er alles anzeigen müsste
    der dritte zeigt als einziger das richtige an

    PHP-Code:
    $("#registration_membership-173-singleselect-8").change(function () {

        if ($(
    this).val() == "ÖNM") {
          $(
    '.rc_form__col:nth-child(2)').show();
          $(
    '#registration_membership-173-multiselect-2').attr('required''');
          $(
    '#registration_membership-173-multiselect-2').attr('data-error''This field is required.');
        } else {
          $(
    '.rc_form__col:nth-child(2)').hide();
          $(
    '#registration_membership-173-multiselect-2').removeAttr('required');
          $(
    '#registration_membership-173-multiselect-2').removeAttr('data-error');
        }
      });
      $(
    "#registration_membership-173-singleselect-8").trigger("change");

      $(
    "#registration_membership-173-singleselect-8").change(function () {
        if ($(
    this).val() == "ÖNM & IÖM") {
          $(
    '.rc_form__col:nth-child(2)').show();
          $(
    '.rc_form__col:nth-child(3)').show();
          $(
    '.rc_form__col:nth-child(4)').show();
          $(
    '#registration_membership-173-multiselect-2').attr('required''');
          $(
    '#registration_membership-173-multiselect-3').attr('required''');
          $(
    '#registration_membership-173-singleselect-5').attr('required''');
          $(
    '#registration_membership-173-multiselect-2').attr('data-error''This field is required.');
          $(
    '#registration_membership-173-multiselect-3').attr('data-error''This field is required.');
          $(
    '#registration_membership-173-singleselect-5').attr('data-error''This field is required.');
        } else {
          $(
    '.rc_form__col:nth-child(2)').hide();
          $(
    '.rc_form__col:nth-child(3)').hide();
          $(
    '.rc_form__col:nth-child(4)').hide();
          $(
    '#registration_membership-173-multiselect-2').removeAttr('required');
          $(
    '#registration_membership-173-multiselect-3').removeAttr('required');
          $(
    '#registration_membership-173-singleselect-5').removeAttr('required');
          $(
    '#registration_membership-173-multiselect-2').removeAttr('data-error');
          $(
    '#registration_membership-173-multiselect-3').removeAttr('data-error');
          $(
    '#registration_membership-173-singleselect-5').removeAttr('data-error');
        }
      });
      $(
    "#registration_membership-173-singleselect-8").trigger("change");

      $(
    "#registration_membership-173-singleselect-8").change(function () {
        if ($(
    this).val() == "IÖM") {
          $(
    '.rc_form__col:nth-child(3)').show();
          $(
    '.rc_form__col:nth-child(4)').show();
          $(
    '#registration_membership-173-multiselect-3').attr('required''');
          $(
    '#registration_membership-173-singleselect-5').attr('required''');
          $(
    '#registration_membership-173-multiselect-3').attr('data-error''This field is required.');
          $(
    '#registration_membership-173-singleselect-5').attr('data-error''This field is required.');
        } else {
          $(
    '.rc_form__col:nth-child(3)').hide();
          $(
    '.rc_form__col:nth-child(4)').hide();
          $(
    '#registration_membership-173-multiselect-3').removeAttr('required');
          $(
    '#registration_membership-173-singleselect-5').removeAttr('required');
          $(
    '#registration_membership-173-multiselect-3').removeAttr('data-error');
          $(
    '#registration_membership-173-singleselect-5').removeAttr('data-error');
        }
      });
      $(
    "#registration_membership-173-singleselect-8").trigger("change"); 
    - - - Aktualisiert - - -

    https://jsfiddle.net/The_C/5nb9jv41/2/
    Geändert von The_C (01-09-2022 um 16:30 Uhr)

  10. #10
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.953

    AW: Hidden &amp;amp;amp;amp;amp; Show

    Bei Umlauten ist überall der selbe Zeichensatz zu verwenden, also im Editor, in der DB, die Angabe im HTML usw. Auf Windows ist ANSI/ISO-8859-1 bzw. -15 Standard. In den Browsern (und m. W. auch in Datenbanken) ist UTF-8 Standard. Welchen Editor nutzt du, wie hast du den Quellcode gespeichert und welcher charset steht im HTML (meist oben im <head>)?
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png

  11. #11
    The_C ist offline Routinier
    registriert
    01-08-2011
    Beiträge
    272

    AW: Hidden &amp;amp;amp;amp;amp; Show

    Ja ich verwende UTF-8 aber das wird doch nicht das Problem sein weil weshalb funktioniert es dann auch nicht wenn ich ein reines HTM aus dem Code mache und der Editor und das charset auf UTF-8 eingestellt ist?

    Ich versuche jetzt mal aus dem HTML alle Umlaute zu entfernen dann sollte es ja deinen Meinung nach funktionieren. Ein Moment...

    Hab das gerade ausprobiert mit TEST1 TEST2 und TEST3 Und NEIN das hat nix mit UTF-8 oder oder irgendwelchen charsets zu tun.

    Hier ist die Änderung zu sehen: https://jsfiddle.net/The_C/5nb9jv41/10/ ohne Umlaute!
    Geändert von The_C (02-09-2022 um 11:02 Uhr)

  12. #12
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.953

    AW: Hidden &amp;amp;amp;amp;amp; Show

    In deinem Fiddle ist ein Syntaxfehler. Mach' ma' bitte die Konsole mit F12 an und behebe erst mal alle Fehler.
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png

  13. #13
    The_C ist offline Routinier
    registriert
    01-08-2011
    Beiträge
    272

    AW: Hidden &amp;amp;amp;amp;amp; Show


  14. #14
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.953

    AW: Hidden &amp;amp;amp;amp;amp; Show

    Habe dir eine Debug Ausgabe eingefügt: https://jsfiddle.net/Ls2n63ad/

    Das beweist, dass es nicht an den Umlauten liegt sondern an den anderen Kommandos in diesem Code Bereich.
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png

  15. #15
    The_C ist offline Routinier
    registriert
    01-08-2011
    Beiträge
    272

    AW: Hidden &amp;amp;amp;amp;amp; Show

    War mir schon klar ;-) nur wie wird das richtig gemacht das war meine Frage von Anfang an.
    Er zeigt ja auch in der console alles an:
    PHP-Code:
    console.log($('.rc_form__col:nth-child(2), .rc_form__col:nth-child(3), .rc_form__col:nth-child(4)').show()); 
    0,00 Plan was da los ist.
    Geändert von The_C (02-09-2022 um 16:12 Uhr)

Seite 1 von 2 12 LetzteLetzte

Ähnliche Themen

  1. [FRAGE] Slide show, wie startet die slide show selbständig
    Von frankmehlhop im Forum JavaScript
    Antworten: 9
    Letzter Beitrag: 13-09-2014, 20:12
  2. Hide/Show
    Von anno123 im Forum JavaScript
    Antworten: 10
    Letzter Beitrag: 24-05-2012, 01:34
  3. Dia-SHOW !!!!!!!!!!!!!!!
    Von etnies20 im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 31-12-2006, 22:45
  4. Antworten: 4
    Letzter Beitrag: 24-06-2005, 17:58
  5. www.xyz.com?show=xyz ???
    Von Mr. Joe im Forum Serverseitige Programmierung
    Antworten: 5
    Letzter Beitrag: 10-04-2005, 20:42

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •