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>
 

mikemichel

Mitglied
oder hier:
Code:
var schauspieler = document.querySelectorAll(".schauspieler");
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";
    }
  }
})
 

mikemichel

Mitglied
Es kuntioniert. Was ich nicht wusste ist, dass die Datei bzw. das hier: <script src="dateiname.js"></script>
am Ende meines Codes eingebaut werden muss. Ich hatte es die ganze Zeit über dem Code.
 

mikemichel

Mitglied
Sorry muss doch noch mal was fragen.
Soweit klappt alles , bin wirklich sehr zufrieden. Jetzt noch eine andere Sache, aber keine Ahnung ob das dann etwas größeres ist.
Also ich habe ja diese html Seite mit den Schaupieler, insgesamt befinden sich 25 Schauspieler auf einer html Seite und davon gibt es zur Zeit 22 Stück /Seiten.
Natürlich sind die Nationalitäten der Schauspieler komplett durcheinander.
Was muss ich machen wenn ich auf der ersten Schauspieler Seite (also die, wo ich jetzt das ganze einbaut habe) alle Deutsche anklicke, damit mir auch die deutschen Schauspieler von Seite 17 angezeigt werden und diese auf der erste Seite gezeigt werden?
Verstanden was ich meine?
 

Sempervivum

Erfahrenes Mitglied
Ja, verstehe. Ich war bisher davon ausgegangen, dass alle Schauspieler auf einer Seite sind.
Machbar ist das auf jeden Fall, ich überlege mal, wie es am günstigsten geht.
Wichtig wäre dabei zu wissen, ob die Suchfunktion nur auf einer Seite sein soll oder auf allen.
Und wie groß das Datenvolumen einschl. Bildern ungefähr pro Schauspieler ist, ca. x Bilder mit je y kB.
Sind ja immerhin 550 Schauspieler, da kann schon etwas zusammen kommen.
 

mikemichel

Mitglied
das ist die seite goo.gl/Kgi4Q2 es kommen aber immer mehr dazu. was die sortierung angeht, ich würde diese in die navigation mit reinbringen, dann wäre es immer verfügbar, egal auf was für eine seite man gerade ist.
 

Sempervivum

Erfahrenes Mitglied
Ich habe mal eine Demo für eine solche Suche über mehrere Seiten gebaut:
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>
        <script>
            var pages = [
                "test13-1.html", "test13-2.html"
            ];
            var alledarsteller = $("<div></div>");
            pages.forEach(function (item, idx) {
                $.ajax(item, {
                    success: function (data) {
                        var darsteller = $("<div>" + data + "</div>").find(".figure").css("display", "none");
                        alledarsteller.append(darsteller);
                    }
                });
            });
            $("body").prepend(alledarsteller);
            var sel = document.getElementById("selectnat");
            sel.addEventListener("change", function () {
                var nat = sel.options[sel.selectedIndex].value;
                $(".figure").css("display", "none");
                $(".figure." + nat).css("display", "block");
            }); 
        </script>
In das Array pages musst Du deine 22 Seiten eintragen. Diese werden dann über Ajax geladen und in den Container alledarsteller eingetragen. Dieser wird wiederum an Anfang des body hinzu gefügt.
Das Skript benutzt jetzt jQuery, vergiss nicht, dies einzubinden.
 

mikemichel

Mitglied
Hallo,

jetzt wird es etwas doof. jQuery, Array und Ajax!!! WOW. Also was ich jetzt gemacht habe. Ich habe den oben genannten Code von dir mit der aktuellen .js Datei ersetzt, dazu habe ich dann hier:

"test13-1.html", "test13-2.html"

meine Seiten ersetzt, also gerade mal zwei Stück, das sind zwei Testseiten, da ich noch nichts Online stellen möchte bevor es nicht 100% funktioniert.
Dazu habe ich noch am Ende meine Darsteller Liste folgendes eingebaut:

<script src="https://code.jquery.com/jquery-latest.js"></script>
Diese Info habe ich von da: https://www.html-seminar.de/jquery-tutorial.htm

Leider kuntioniert es nicht. Was mache ich flasch? Bitte ich bin kein Profi. DANKE
 

Sempervivum

Erfahrenes Mitglied
Ja, von nichts kommt nichts, irgend wie muss man ja die anderen Seiten laden. Mit PHP wäre es auch nicht einfacher.
Wichtig ist, dass Du jQuery vor dem Skript aus Posting #16 einbindest. Wenn es dann immer noch nicht funktioniert, dann öffne die Console und poste etwaige Fehlermeldungen: Strg+Umsch+I oder F12 beim IE.
 

mikemichel

Mitglied
Es geht, allerdings ist das Design dann voll verhauen. Schau mal hier: goo.gl/oGvYtL das ist die test Seite 1 und hier Testseite 2 goo.gl/2Risij
Auf beiden Seiten ist soweit alles eingebaut was rein soll.
Interessant ist, wenn ich auf der ersten Testseite dann wieder auf Alle klicke, ist kein einziger Star mehr da.
 

Sempervivum

Erfahrenes Mitglied
Ja, das war erst Mal nur eine Demo für die Suche und es ist schon Mal erfreulich, dass diese funktioniert. Man muss das dann noch in das Layout integrieren. Ich arbeite dazu mal etwas aus ...