Sortierlis

[admin]

Hi,
ich habe mal wieder ein Problem (und damit mein ich nicht das Ergebnis der deutschen Nationalmannschaft eben )
Ich versuche eine Liste zu erstellen, mit z.B. Automarken, Obst, Städten und  Tieren.
Alles komplett durcheinander.
Jetzt möchte ich via Buttons nur noch eine Kategorie einblenden. Dabei sollen jedoch nicht nur die anderen ausgeblendet werden, sondern die jeweilig dazugehörigen Elemente nach oben nachrutschen.

Wichtig ist mir hierbei, keine Listenelemente zu benutzen. Theoretisch könnte z.b. bei jedem Element noch ein Bild dabei sein oder so. Also es sollen quasi ganze

Blöcke sortiert werden.

Ich habe verschiedenes probiert. Ich dachte an .style.display ="none". Allerdings funktioniert das nicht.
Desweiteren frage ich mich ob man das nur über den Klassennamen regeln kann, da die Klassennamen in meinen Dateien mittlerweile oft schon komplett überladen sind.

MfG

<div class ="row">
  <button id="ST">Städte</button>
  <button id ="OB">Obst</button>
  <button id="AU">Automarken</button>
  <button id="TI">Tiere</button>

  <div class="col-xs-6 col-md-2"></div>

  <div class="col-xs-6 col-md-2">
<div  class ="Städte">Hamburg</div>
<div class ="Obst">Birnen</div>
<div class ="Städte">Berlin</div>
<div class ="Autos">Mercedes</div>
<div class ="Obst">Äpfel</div>
<div class ="Autos">BMW</div>
<div class ="Tiere">Bär</div>
<div class ="Städte">München</div>
<div class ="Autos">Ford</div>
<div class ="Tiere">Hase</div>
<div  class ="Städte">Dortmund</div>
<div class ="Obst">Kirschen</div>
<div class ="Städte">Erfurt</div>
<div class ="Autos">Audi</div>
<div class ="Obst">Melonen</div>
<div class ="Autos">Ferrari</div>
<div class ="Tiere">Hund</div>
<div class ="Städte">Tokio</div>
<div class ="Autos">Trabant</div>
<div class ="Tiere">Seehund</div>
</div>
</div>

<script>

document.getElementById('AU').onclick=function(){


  document.getElementsByClassName("Tiere").style.display='none';
  document.getElementsByClassName("Städte").style.display='none';
  document.getElementsByClassName("Obst").style.display='none';
     }




document.getElementById('TI').onclick=function(){
}
document.getElementById('ST').onclick=function(){
}
document.getElementById('OB').onclick=function(){
}

</script>

[admin]

für sowa gab es ein geiles script . ich suche das mal gerade .da konnte man den obst und die automarken eine klasse geben und via button ein und ausblenden und so .ich kucke mal gerade wo ich das beispiel habe das könnte was sein für dich ,
Ja das deutschlandspiel wahr echt große scheisse blamage für uns ,und das alt weltmeister ,ich kotze

[admin]

guck mal, ob du so eine Sortierfunktion meinst? Die lässt sich ja auch auf Automarken und Co anwenden
https://basti1012.bplaced.net/index.php?ordner=soforthilfeforum&name=Sortierliste

Sortierliste
Sortierliste Hi, ich habe mal wieder ein Problem (und damit mein ich nicht das Er…

[admin]

Ich denke, das dürfte genau das sein, probiere ich gleich mal!

---

Muss ich dafür noch irgendetwas Spezielles einbinden? Bei mir läuft das Programm leider nicht. Also es ist richtig dargestellt, aber der vorderste Button bleibt angeklickt und sortiert wird auch nichts.

[admin]

Jo einmal jQuery und Isotope muss da mit rein dann sollte es gehen

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://npmcdn.com/isotope-layout@3/dist/isotope.pkgd.js"></script>

[admin]

Perfekt. Isotope hat mir gefehlt videlen Dank!

[admin]

Dann versuch mal, das auf deine Automarken anzuwenden. Sollte eigentlich kein Problem sein wenn man da einmal durchgeblickt hat

[admin]

Ja hab das schon auf alles Mögliche angewendet den Tag über. Klappt super. Habe nur einen Fehler beim Browserfenster neu laden öfter gehabt, welcher für mich unerklärlich ist. Wenn man die HTML Datei öffnet, war alles super, nachdem man das Browserfenster aber aktualisiert hat, war plötzlich die Anordnung komplett verrutscht dargestellt. Habe jetzt leider kein Beispiel mehr parat, aber war einfach seltsam.

[admin]

Wenn der Fehler wieder auftritt oder noch hast dann kopiert mal den ganzen code hier rein. Aber wenn zurzeit alles läuft ist ja gut. Ich baue gerade ein User scrit für das Online spiel pennergame. Wenn ich fertig bin, brauche ich eine neue Aufgabe bevor ich Langeweile bekomme heeh

[admin]

Ich bekomme es gerade nicht mehr rekonstruiert, hatte den Fehler aber häufiger. Es handelte sich wohl darum, dass ich ein responsives Video eingebunden hatte und das ganze dann auch noch in einem responsiven Beitragsfeld. Isotope hat das dann irgendwie nicht erkannt und dann bevor man einen Button gedrückt hat immer alle Videos aneinander geschoben. Ganz komisch.
Habe mir überlegt, das dann so zu lösen:
Ein automatischer Klick, sobald mein die Site neu aufruft. Also quasi, dass windows.onload automatisch einen Button anklickt noch bevor der User das machen kann. Leider hat das nicht geklappt. Falls du dazu eine Idee hättest, würde ich mir die gerne anschauen