Ankündigung

Einklappen
Keine Ankündigung bisher.

Buttonfarbe ändern und die Class ausgeben

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

  • Buttonfarbe ändern und die Class ausgeben

    Hallo Zusammen,

    ich bin seit nun zwei Tagen in Netz unterwegs und suche eine Möglichkeit die Buttonfarbe per klick auf den Button zu ändern. das habe ich

    PHP-Code:

        <style>
       .
       .
       .
        </style>
        <script type="text/javascript">        
            function changeColor($elm, classes) {                
                var className = $elm.attr('class');                
                var index = $.inArray(className, classes);
                $elm.removeClass(className);
                index++;    

                if (index === classes.length) {
                    index = 0;
                }            
                $elm.addClass(classes[index]);                            
            }        

            $(function(){            
                var $button = $("#dynamic-button<?php echo $ID?>");
                var classes = ["red<?php echo $ID?>", "green<?php echo $ID?>", "blue<?php echo $ID?>", "yellow<?php echo $ID?>"];    
                  $button.on("click", function (){                
                    changeColor($(this), classes);  
                });                
            });

        </script>

            <tr><td><td  align="center"> <button id="dynamic-button<?php echo $ID?>" name="<?php echo $ID?>" class="blue<?php echo $ID?>"><?php echo $ret.$DESC?></td></td><tr>
    Ich lese eine DB aus und zu jedem Eintrag (zu prüfende Station) erstelle ich ein Button mit der $ID. Soweit alles gut.
    Nun brauche ich aber ja einen Rückgabewert vom Zustand des Buttons... ich klicke zweimal drauf (class=red) der Button ist rot und dies möchte ich weiter verwenden... (zweimal Klicken und die Station ist niO) Diesen Rückgabewert möchte ich in die DB schreiben.

    Wie komme ich an die Class der Funktion ran als Ausgabe oder wie bekomme ich eine Zähler beim Klicken auf den Button mit rein den ich (get und post geht ja nicht...)

    Ich hoffe man kann mir helfen. Ich danke Euch.

    Andreas


  • #2
    Weshalb sendest du nicht bei einem Klick auf den Button die Änderung nicht gleich per AJAX an die Datenbank?

    Kommentar


    • #3
      ganz ehrlich... keine Ahnung wie das geht...

      Und der Status vom Button ist ja immer noch nicht da...

      Hast du bitte ein kleines Bsp. für mich.

      Kommentar


      • #4
        Ein button kann z.b. einen value haben, dort könntest du den status reinspeichern. Und wenn du ohne AJAX arbeiten willst erstellst du für jeden Button einen hidden input in dem du den status abspeicherst. Wenn du dann das Formular abschickst hast du den Status per POST. Mit AJAX ists aber sicher schöner. AJAX-Tutorials gibts wie Sand am Meer wenn man danach sucht.

        Kommentar


        • #5
          --- sorry war ganz am thema vorbei --

          Kommentar


          • #6
            Du könntest dataset benutzen:

            HTML-Code:
            <!doctype html>
            <html lang="de">
            <head>
              <meta charset="UTF-8">
              <title>Document</title>
              <style>
                .red{background-color:red;}
                .blue{background-color:blue;}
                .green{background-color:green;}
                .yellow{background-color:yellow;}
              </style>
            </head>
            <body>
              <button  data-color=0 class="red" >Farbe</button>
              <button  data-color=1 class="blue" >Farbe</button>
              <button  data-color=2 class="green" >Farbe</button>
              <button  data-color=3 class="yellow" >Farbe</button>
              <script>
              document.addEventListener("click", el => {
                if(el.target.tagName == 'BUTTON'){
                  var myClasses=["red","blue","green","yellow"];
                  with (el.target.dataset) {
                    el.target.classList.remove(myClasses[color]);
                    color = ++color * (color < myClasses.length);
                    el.target.classList.add(myClasses[color]);
                  }
                }
              });
              </script>
            </body>
            </html>

            Kommentar

            Lädt...
            X