Ankündigung

Einklappen
Keine Ankündigung bisher.

Fadein, fadout mit this

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Fadein, fadout mit this

    Hallo zusammen,

    ich sage gleich vorab, dass ich bisher mit Jquery nicht viel am Hut hatte und ein absoluter Anfänger bin.

    Folgende Situation:

    Ich habe eine Seite mit mehreren Elementen, welche die gleiche ID tragen

    HTML-Code:
    <div class="listbutton">    
       <div id="l-id">l-id-show öffnen</div>      
       <div id="l-id-show">ID 231312</div>
    </div>  
    
    <div class="listbutton">      
       <div id="l-id">l-id-show öffnen</div>      
       <div id="l-id-show">ID 5323</div>
    </div>  
    
    <div class="listbutton">      
       <div id="l-id">l-id-show öffnen</div>      
       <div id="l-id-show">ID 653</div>
    </div>

    Wenn man auf "l-id" klickt, soll sich die "l-id-show" öffnen (steht vorher auf display:none) und wenn man dann auf "l-id-show" klickt, soll diese sich wieder schließen.

    Das habe ich mit diesem Script soweit auch geschafft:

    HTML-Code:
    <script>      
    // Symbole ein und ausblenden    
    $('#l-id').click(function(){        
       $('#l-id-show').show();})        
       $('#l-id-show').click(function(){        
          $(this).hide();    
       })
    </script>
    Das Problem ist nur (wie man bestimmt ahnt), dass diese Funktionsweise nur für den ersten "listbutton" Container funktioniert. Die anderen zeigen dann keine Reaktion. Ich weiß zwar dass man hier mit "this" das evtl. lösen könnte, meine Jquery-Kenntnisse reichen in dem Fall aber leider nicht aus.

    Würde mich über eure Hilfe sehr freuen!


    Grüße,
    Joe


  • #2
    welche die gleiche ID tragen
    Das ist Fehler!

    Ids sind einmalig.

    Kommentar


    • #3
      HTML-Code:
      <div id="l-id" onclick="this.nextSibling...">l-id-show öffnen</div>  
      <div id="l-id-show" onclick="this...">ID 231312</div>
      protestix das ist keine Lösung, das ist 'ne Erlösung.
      Signaturrrrrrr

      Kommentar


      • #4
        Das ist die wohl schlechteste Lösung.




        Kommentar


        • #5
          Verstehe. Dann werde ich meine Schleife umschreiben, dass die id immer eine Zahl dazu kriegt. Weiß aber allerdings immer noch nicht wie man diese greifen soll?

          HTML-Code:
          <div class="listbutton">        
             <div id="l-id-1">l-id-show öffnen</div>          
             <div id="l-id-show-1">ID 231312</div>
          </div>    
          
          <div class="listbutton">          
             <div id="l-id-2">l-id-show öffnen</div>          
             <div id="l-id-show-2">ID 5323</div>
          </div>    
          
          <div class="listbutton">          
             <div id="l-id-3">l-id-show öffnen</div>          
             <div id="l-id-show-3">ID 653</div>
          </div>

          Kommentar


          • #6
            Ungetestet

            HTML-Code:
              <div class="listbutton">            <div class="button" data-id="1">l-id-show öffnen</div>              <div id="l-id-show-1">ID 231312</div> </div>
            Code:
            $(document).on('click', '.button', function() {
              var id = $(this).attr('data-id');
              $('l-id-show-' + id).show();
            })
            Du greifst die id des geklickten "Buttons", entweder auf Deine Art indem du die id holst und dann mit .split() das auseinanderbastelst oder aber so wie ich indem du ein data-* Attribut nutzt. Dann setzt du das Element zusammen und öffnest den div mit der zusammengesetzten neuen id.

            Kommentar


            • #7
              1. Eine schöne Div-Suppe. Es gibt bei HTML auch noch andere Elemente außer Div.

              2. Elemente, die ohne JavaScript keine Funktion haben, sollten ohne JavaScript auch nicht sichtbar sein.

              Kommentar


              • #8
                Also ich habe das jetzt wie folgt geändert und es passiert leider gar nichts:

                HTML-Code:
                <script>
                   $(document).on('click', '.l-id', function() {
                   var id = $(this).attr('data-id');
                   $('l-id-show-' + id).show();
                   })
                </script>
                
                
                <div data-id="1" class="l-id">ID</div>
                <div class="l-id-show" id="l-id-show-1">ID: <b>2775</b></div>
                
                <div data-id="2" class="l-id">ID</div>
                <div class="l-id-show" id="l-id-show-2">ID: <b>2776</b></div>
                "display:none" ist auf der Klasse "l-id-show".



                Zitat von hellbringer Beitrag anzeigen
                1. Eine schöne Div-Suppe. Es gibt bei HTML auch noch andere Elemente außer Div.

                2. Elemente, die ohne JavaScript keine Funktion haben, sollten ohne JavaScript auch nicht sichtbar sein.
                Mir ist nicht ganz klar was du damit meinst? Welche Elemente sollten in dem Fall nicht sichtbar sein?

                Kommentar


                • #9
                  Er meinte, dass man so etwas auch mit anderen Elementen lösen kann.

                  Semantik wäre das Stichwort.

                  Ein kleines Beispiel hierzu:

                  HTML-Code:
                  <!DOCTYPE html>
                  <html lang="de">
                   <meta charset="utf-8">  
                    <title>Semantik</title>
                    <style>
                        body{font-family: Calibri, sans-serif;}
                        section p {display:none;}
                        section h3::after{content:" ⯆"; cursor:pointer;}
                        .selected::after{content:" ⯅"; cursor:pointer;}
                    </style>
                    <script
                    src="https://code.jquery.com/jquery-3.3.1.js"></script>
                    <header>
                      <h1>Deutschland</h1>
                    </header>
                    <article>
                      <h2>Orte</h2>
                      <section>
                        <h3>Köln</h3>
                        <p>hier wird was über Köln erzählt
                        <p>auch etwas über den Rhein
                      </section>
                      <section>
                        <h3>Bonn</h3>
                        <p>hier über Bonn
                      </section>
                    </article>
                    <article>
                      <h2>Persönlichkeiten</h2>
                      <section>
                        <h3>Angela Merkel</h3>
                        <p>hier würde etwas über unsere Angela stehen
                      </section>
                      <section>
                        <h3>Andrea Nahles</h3>
                        <p>Andrea sollte aber auch nicht zu kurz kommen
                      </section>
                    </article>
                    <script>
                      $(document).on('click', 'section h3', function() {
                        $(event.target).closest('section').find('p').slideToggle();
                        $(this).toggleClass( "selected" );
                      })
                    </script>
                  In der Regel benutze ich jQuery nicht, diesmal nur weil Du Dich damit beschäftigst....

                  Kommentar


                  • #10
                    HTML-Code:
                    <style>
                        a.toggle {
                            font-size: 0.7em;
                            margin-left: 1ex;
                            cursor: pointer;
                        }
                    </style>
                    
                    <script>
                        jQuery(function ($) {
                            $('div').hide();
                            $('h2').append(
                                $('<a class="toggle">click to open/hide</a>').click(function (e) {
                                    e.preventDefault();
                                    $(this).parent().next('div').toggle();
                                })
                            );
                        });
                    </script>
                    
                    <h2>Title 1</h2>
                    <div>Content 1</div>
                    
                    <h2>Title 2</h2>
                    <div>Content 2</div>
                    
                    <h2>Title 3</h2>
                    <div>Content 3</div>
                    Demo: https://jsfiddle.net/1qxmpo2y/

                    Kommentar


                    • #11
                      Zitat von JoePetts Beitrag anzeigen
                      Also ich habe das jetzt wie folgt geändert und es passiert leider gar nichts:
                      Du hast data-id auch nicht gesetzt im HTML. Siehe #6, den HTML-Teil.

                      Kommentar


                      • #12
                        Zitat von jonas3344 Beitrag anzeigen

                        Du hast data-id auch nicht gesetzt im HTML. Siehe #6, den HTML-Teil.
                        Das ist doch gesetzt:
                        HTML-Code:
                          <div data-id="1" class="l-id">ID</div>
                        Er gibt mir auch die richtige ID "l-id-show-1" aus. nur das Show scheint in der Form nicht zu funktionieren..

                        kaminbausatz, @hellbringr danke für die Beispiele. Hätte das zwar gerne mit der vorhandenen Struktur gelöst, weil die CSS definiert ist, aber ich probiere das mal mit dem Umschreiben aus.

                        Kommentar


                        • #13
                          Zitat von JoePetts Beitrag anzeigen
                          danke für die Beispiele. Hätte das zwar gerne mit der vorhandenen Struktur gelöst, weil die CSS definiert ist, aber ich probiere das mal mit dem Umschreiben aus.
                          Dann pass es an deine Struktur an.

                          Das Herumgehampel mit irgendwelche IDs ist aber unnötig.

                          Kommentar


                          • #14
                            Man kann auch CSS Dateien ändern.

                            Kommentar


                            • #15
                              Vielen Dank an alle. Hat geklappt!

                              HTML-Code:
                              <section>
                                 <h3 class="l-id"></h3>
                                 <article class="l-id-show">ID: <b>'.$id.'</b></article>
                              </section>
                              Code:
                              jQuery(function ($) {
                                  $('article').hide();
                                  $('h3').append(
                                  $('ID').click(function (e) {
                                    e.preventDefault();
                                    $(this).parent().next('article').toggle();
                                  })
                                  );
                              });

                              Kommentar

                              Lädt...
                              X