Ankündigung

Einklappen
Keine Ankündigung bisher.

Buttonfarbe ändern und die Class ausgeben

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

  • Bundi737
    hat ein Thema erstellt Buttonfarbe ändern und die Class ausgeben.

    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

  • kaminbausatz
    antwortet
    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>

    Einen Kommentar schreiben:


  • tomBuilder
    antwortet
    --- sorry war ganz am thema vorbei --

    Einen Kommentar schreiben:


  • jonas3344
    antwortet
    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.

    Einen Kommentar schreiben:


  • Bundi737
    antwortet
    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.

    Einen Kommentar schreiben:


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

    Einen Kommentar schreiben:

Lädt...
X