Ergebnis 1 bis 3 von 3

Thema: Container Style verändern in Datenbank Ausgabe

  1. #1
    Neuer Benutzer
    Registriert seit
    07.01.2018
    Beiträge
    2

    Container Style verändern in Datenbank Ausgabe

    Hallo,

    hier wird für jede ROW in der Datenbank ein Container ausgegeben. In jedem Container ist ein Button. Sobald man innerhalb eines Containers auf den Button klickt, soll genau dieser Container eine andere Höhe bekommen. Er soll also per Click vergrößert werden. Die anderen Container sollen natürlich bei ihrer Standardgröße verbleiben und erst größer werden, wenn auch bei ihnen auf den Button geklickt wird. Sobald ein zweites mal auf den Button geklickt wird, soll der Container wieder die Standardgröße einnehmen.
    Kann mir jemand dabei helfen? Meine Funktion funktioniert nur für den ersten Container und der Container wird auch beim zweiten mal klicken nicht auf die Standardgröße zurückgesetzt. Im voraus schonmal DANKE!!!

    Hier ein Beispielquelltext:

    ...........

    <?php

    while($row = $result->fetch_assoc()) {


    ?>
    <div id="angebotskasten" style='width: 100%; height:400px; background-color: blue;' >


    <button type='submit' id='button'>Angebotskasten vergrößern</button>





    </div>


    <?php


    }

    ?>

    .........

    <script>

    $("#button").click(function(){

    $("#angebotskasten").css('height' , '800px');

    });


    </script>

  2. #2
    Moderator
    Registriert seit
    04.05.2012
    Beiträge
    2.680
    Da IDs eindeutig sein müssen kannst du in der Schleife IDs, zumindest so, nicht verwenden. Ich würde dir Klassen empfehlen.
    Ich würde auch niemals, wenn möglich, direkt CSS Style an ein Element schreiben sondern über die Klasse arbeiten.

    Alles was du brauchst ist:

    HTML-Code:
    <style>
    .deine-container-class {
     width: 100%;
     height: 400px;
     background-color: blue;
    }
    .deine-container-class.active {
     height: 800px;
    }
    </style>
    <script>
    $('.deine-button-class').click(function () {
      $(this).closest('.deine-container-class').toggleClass('active');
    });
    </script>
    Also sorg dafür das die IDs verschwinden und füge die Klassennamen hinzu die du verwenden willst, diese passt du oben im CSS und Script an und bist fertig....
    Pakete werden jetzt mit $_DHL geliefert... nicht mehr mit $_POST

  3. #3
    Neuer Benutzer
    Registriert seit
    07.01.2018
    Beiträge
    2
    ich Danke dir !!!

Lesezeichen

Lesezeichen

Berechtigungen

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