Frage Checkboxen Status durch andere Checkbox ändern

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Werbung

Jetzt auf elektrisches Fahren umstellen, Umwelt schonen und 1.500km kostenlosen Strom von Tesla bekommen. https://ts.la/carsten15473.

Chrigodth

Neues Mitglied
25 April 2019
2
0
1
32
[Offtopic]
Hi, ich bin noch etwas neu was CSS angeht. Java garkeine Ahnung, nur ein bisschen Schul-C# gehabt.

[Umgebung]
Apache Server + MysqlAdmin + bootstrap

[Absicht](Anlage: Wunschlage.png)
Ich hab eine Musikalbenübersicht und ich möchte sie Smartphone-Ready machen. Mein Hauptproblem liegt an den Flip-Cards die ich gebaut habe. Diese funktionieren über Checkboxen, die leider von einander unabhängig sind. Ich möchte eig. kein Java benutzen, weil es damit noch komplizierter wird.

Normal wird ein Albumcover, sowie Albumname + Interpret angezeigt.(Anlage: Ausgangslage.png)
So und wenn ich eine anklicke kommt jetzt ein Menü zum bearbeiten, löschen und Songs anzeigen. Wenn ich das nächste Album aber stattdessen anklicken will, soll wieder die Flip-box-front des vorherigen Albums angezeigt werden und nicht das Menü auf der Flip-box-back.

[IST-Zustand](Anlage: Fail.png)
Im Grunde bin ich diesem Beispiel gefolgt( ) und mit jedem neuen Album wird eine neue flip-box erstellt.
#Listeneinträge per Schleife
PHP:
 for($i=0;$i<count($AlbenListe);$i++)



HTML:
Flip-box Front:

<label>

             <div class="flip-box">
            //eig. flip-box-front, aber dann funktioniert es erst recht nicht. Eigens erstelltes CSS weiter unten
                            <div class="flip-box-inner">
                                <input type="checkbox">
                            <div class="card">
                                <div  class="flip-box">';                    
                                    {Musikalbumvorschau}oder Text rein schreiben;                                      
                                   <p>'. $AlbenListe[$i]['Albumname'].'<br> von '.$AlbenListe[$i]['Interpret'].'</p>

                         </div><!--flip-box-front-->
    </label>


//Flip-box Rückseite
<div class="flip-box-back">

                                    <ul class="list-group list-group-flush">
                                          <li>
                                                    Menüpunkt Songs anzeigen

                                                    Menüpunkt Album bearbeiten
                        
                                                    Menüpunkt Album löschen

                                                     Menüpunkt Albumdetails

                                            </li>       

                            echo' </ul>  //list-group bootstrap.css Ende                           
</div><!--flip-box-back-->
CSS:
.flip-box {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 0px solid #f1f1f1;
  perspective: 100px; /* Remove this if you don't want the 3D effect */
}

.flip-box-back {

  display: block!important;
}

/* FlipBox Optionen Allgemein // This container is needed to position the front and back side */
.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 5.8s;
  /*transform-style: preserve-3d;*/
}

label :checked + .card {
    transform: rotateX(180deg);
}

/* Style the front side */
.flip-box-front {
  background-color: transparent;
  color: black;
}

/* Style the back side */
.flip-box-back {
  background-color: white;
  color: white;
  transform: rotateX(180deg);
}
 

Anhänge

Zuletzt bearbeitet:

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.437
285
83
66
Voll bin ich in den Code nicht eingestiegen, aber u. U. könnte es schon ausreichen, wenn Du statt Checkboxen Radiobuttons verwendest. Dann wird der alte deaktiviert wenn Du einen anderen anklickst.
 
Reactions: Chrigodth