Artikelsortierung in HTML Dokument

mikemichel

Mitglied
Hallo liebe Webmaster und Programmierer.

Also vorab ich bin kein großer Programmierer, ich kenne mich ein wenig in HTML aus, kann auch was mit CSS anfangen, dennoch bin ich offen für alles.
Folgendes Problem habe ich.

Ich habe eine reine html Seite, auf dieser Seite werden Schauspieler dargestellt, diese stammen dann zum Beispiel aus Deutschland, Russland, Italien usw.
Kommt jetzt ein User und möchte nur Schauspieler aus dem Land Italien auf der Seite sehen, möchte ich dass er dies über eine Drop and Down Liste tätigt, so eine Liste habe ich auch schon gemacht, doch wenn der User drauf klickt, wird er weiter geleitet auf die Datei "schaupieler-italien.html und die anderen Schauspieler sind selbstverständlich ausgeblendet, erst wenn er den zurück Button benutzt oder eine andere Auswahl im Menü tätigt, erscheinen wieder die anderen Schauspieler.
Jetzt möchte ich aber dass der User erst garnicht auf eine weitere Seite weitergeleitet wird, sondern er soll auf dieser Seite bleiben.

Ein Beispiel wäre zum Beispiel hier zusehen: https://www.conrad.de/de/gluehbirne-e27-f1750509.html
Sortieren nach: Preis absteigend oder Preis aufsteigend

Mir geht es darum dass ich nicht noch weitere 20 html Seiten basteln möchte. Wie kann ich das realisieren. Mit PHP, Java ....?

Ich hoffe ihr habt verstanden was ich meine!!
 
Zuletzt bearbeitet:

Sempervivum

Erfahrenes Mitglied
Wenn ich dich richtig verstehe, sollen beim ersten Aufruf der Seite alle Schauspieler angezeigt werden und erst durch eine Auswahl gefiltert? Dann lässt es sich relativ leicht mit Javascript realisieren. PHP ist auch eine Möglichkeit und zwar dann, wenn die angezeigten Inhalte umfangreich sind, so dass es angebracht ist, gleich auf dem Server zu filtern und nur die relevanten Inhalte zu laden.
 

Sempervivum

Erfahrenes Mitglied
Dazu müsste jeder Schauspieler in einem Container liegen, z. B. einem div. Dann diesem div eine Klasse geben, die die Nationalität angibt, z. B. "en", "it" oder "de". Ein select einrichten und als value ebenfalls diese Kürzel zuweisen. Beim Auswählen im Select dann die richtigen Container anzeigen bzw. ausblenden.
Hier ein einfaches Demo:
https://jsfiddle.net/Sempervivum/ng2c75ta/5/
 

mikemichel

Mitglied
Ok, bekomme ich hin. Der Javascript code kommt in die html seite? Du schreibst jedem Schauspieler einem div geben, anbei siehst du den Quellcode einer html Seite von mir.
Wo bzw. wie müsste der div aussehen? Mir geht es nur darum wo ich den platzieren soll.

Aktuell sehen zum Beispiel die Stars so aus, also der Quellcode in einer html Seite.:

Code:
<div class="figure">
<p><a href="/olga-cabaeva/olga-cabaeva.html"><img src="/olga-cabaeva/olga-cabaeva1.jpg" alt="Olga Cabaeva" width="160" height="240" border="0"></a><br>
<a href="/olga-cabaeva/olga-cabaeva.html">Olga Cabaeva</a></div>
<div class="figure">
<p><a href="/candy-alexa/pornostar-candy-alexa.html"><img src="/candy-alexa/candy-alexa1.jpg" alt="Candy Alexa" width="160" height="240" border="0"></a><br>
<a href="/candy-alexa/candy-alexa.html">Candy Alexa</a></div>
<div class="figure">
  <p><a href="/ashley-dark/ashley-dark.html"><img src="/ashley-dark/pornostar-ashley-dark1.jpg" alt="Ashley Dark" width="160" height="240" border="0"></a><br>
<a href="/ashley-dark/ashley-dark.html">Ashley Dark</a></div>
 

Sempervivum

Erfahrenes Mitglied
Dann hast Du ja schon die Container, die Du brauchst. Nur jedem noch die richtige Klasse geben und es wird funktionieren:

Code:
<div class="figure de">
<p><a href="/olga-cabaeva/olga-cabaeva.html"><img src="/olga-cabaeva/olga-cabaeva1.jpg" alt="Olga Cabaeva" width="160" height="240" border="0"></a><br>
<a href="/olga-cabaeva/olga-cabaeva.html">Olga Cabaeva</a></div>
<div class="figure it">
<p><a href="/candy-alexa/pornostar-candy-alexa.html"><img src="/candy-alexa/candy-alexa1.jpg" alt="Candy Alexa" width="160" height="240" border="0"></a><br>
<a href="/candy-alexa/candy-alexa.html">Candy Alexa</a></div>
<div class="figure gb">
  <p><a href="/ashley-dark/ashley-dark.html"><img src="/ashley-dark/pornostar-ashley-dark1.jpg" alt="Ashley Dark" width="160" height="240" border="0"></a><br>
<a href="/ashley-dark/ashley-dark.html">Ashley Dark</a></div>
<script>
  var schauspieler = document.querySelectorAll(".figure");
  var sel = document.getElementById("selectnat");
  sel.addEventListener("change", function() {
    var nat = sel.options[sel.selectedIndex].value;
    for (var i = 0; i < schauspieler.length; i++) {
      var akts = schauspieler[i];
      if (nat == "alle" || akts.classList.contains(nat)) {
        akts.style.display = "block";
      } else {
        akts.style.display = "none";
      }
    }
  });   
</script>
Und das select ganz am Anfang.
 

mikemichel

Mitglied
Super es funktioniert. Jetzt noch eins. Vielleicht ist es besser wenn der Javascript Code nicht auf der html Seite eingebaut ist, sondern extern in eine Datei. Wie muss ich das dann machen?
 

mikemichel

Mitglied
Soweit so gut, leider bekomme ich es nicht hin. Wenn ich in meiner html Seite folgendes eingebe:

<script src="dateiname.js"></script>

Nehmen wir mal die Datei mit dem Namen: dateiname.js

muss diese dann auch hier irgendwo erscheinen?
Code:
<select id="selectnat">
  <option value="alle" selected>Alle</option>
  <option value="de">Deutschland</option>
  <option value="it">Italien</option>
  <option value="gb">Großbritannien</option>
</select>
<div class="schauspieler de">
    Deutscher Schauspieler 1
</div>
<div class="schauspieler de">
    Deutscher Schauspieler 2
</div>
<div class="schauspieler it">
    Italienischer Schauspieler 1
</div><div class="schauspieler it">
    Italienischer Schauspieler 2
</div>
<div class="schauspieler gb">
    Britischer Schauspieler 1
</div><div class="schauspieler gb">
    Britischer Schauspieler 2
</div>