jQuery selektor

  • @page { margin: 2cm }
    p { margin-bottom: 0.25cm; line-height: 120% }


    Hallo Forum,


    also, ich bin ein absoluter Anfänger was das Thema jQuery anbelangt. Nach meinem 2 Burnout fällt es mir auch noch unglaublich schwer mich mit Handbüchern auseinanderzusetzen und über einen längeren Zeitraum zu konzentrieren. Dennoch möchte ich gerne langsam das Thema ein wenig verstehen und damit arbeiten. Ich bin 47 Jahre alt und jetzt Frührentner aufgrund meiner Burnouts und nicht voll Leistungsfähig.
    Nun habe ich die Chance bzw. ein Angebot auf geringfügige Beschäftigung wieder ein paar Stunden pro Woche ein Projekt zu betreuen sofern es mir gelingt das Projekt zu realisieren.


    Arbeiten mit HTML, CSS, PHP sind mir bekannt und vertraut. Javascript und jQuery jedoch nicht. Dazu brauche ich Hilfe.
    Gerne bin ich auch bereit erfolgreiche Arbeit zu honorieren hoffe jedoch aber das es auch Menschen gibt die Infos oder auch Code bzw. Codebeispiele so weitergeben bzw. helfen.
    Falls ich das jetzt falsch gepostet habe bitte ich um Platzierung an
    der richtigen Stelle.


    Nun zu meinem Projekt:


    Ich habe einen HTML Table mit 4 Reihen. In jeder Reihe sind 4 Grafiken in <td> die unterschiedliche Artikel darstellen. Nun soll man aus diesen 4 Reihen
    jeweils einen Artikel selektieren können mit einem Klick. Es sind Grafiken und keine select Buttons. Die Auswahl erfolgt also nur mit einem Klick. Nach dem Klick sollte auch die Grafik getauscht werden so das man erkennen kann welche Auswahl getroffen wurde. Nach einem 2 Klick auf den selben Artikel sollte die Auswahl wieder abwählbar sein. Nach dem Klick muss von dem jeweiligen Artikel der Preis in einem weiteren <tr><td> dargestellt werden. Jeder der Artikel (pro Reihe 1er) wird also nach der Auswahl dargestellt mit Preis und Name im separaten <td> . Die Preise und die Beschreibung will ich dann per <input type=“hidden“ value="auswahl_variable_row1... per Post weiterverarbeiten mit PHP.



    Ich hoffe ich habe mich verständlich ausgedrückt und hoffe hier im Forum gibt es Leute die mir helfen können.



    Vielen Dank.


    ThoRei

  • Ich habe mal dieses ausgearbeitet (ohne Tabelle). Schau mal, ob es das ist, was Du brauchst:

  • Danke für die Antwort, leider funktioniert der Source bei mir nicht um zu testen ob das der Ansatz ist. Die Grafiken werden angezeigt aber es erfolgt keine Funktion beim Klick.

  • Danke für die Info!
    Nein, ich hatte als alter Web 1.0 er der ersten Generation kein jQuery eingebunden. Nun aber erledigt, getestet und dein Ansatz ist wirklich sehr gut und geht genau in die Richtung die ich brauche. Schön ist auch das ihr heute kpl. auf <table>'s verzichtet und alles mit <div> oder <span> bzw. css lösen könnt. In meinem Fall aber nicht so wichtig da SEO keine Rolle spielt. Ich hoffe du kannst mir da noch ein bisschen weiterhelfen!? Den Code verstehe ich nicht wirklich da mir das Wissen von jQuery oder allgemein Javascript einfach fehlt. Was mir auffällt ist das man damit aber noch nicht einen Artikel durch den 2 Klick wieder abwählen kann und somit den Preis und die Beschreibung wieder auf empty setzt.

  • Zitat

    Was mir auffällt ist das man damit aber noch nicht einen Artikel durch den 2 Klick wieder abwählen kann und somit den Preis und die Beschreibung wieder auf empty setzt.

    Ich hatte mir vorgestellt, dass Du das selbständig ergänzen kannst. So funktioniert es:
    $(".productimg").on("click", function() { if ($(this).hasClass("active")) {
    $(this).removeClass("active");
    $(this).attr("src", $(this).attr("data-src"));
    $(this).siblings("span.productinfo").html("");
    } else {
    var selimg = $(this).siblings(".productimg.active");
    selimg.attr("src", selimg.attr("data-src")).removeClass("active");
    $(this).addClass("active");
    $(this).attr("src", $(this).attr("data-src-sel"));
    var htm = $(this).attr("data-name") + "<br>";
    htm += $(this).attr("data-price");
    $(this).siblings("span.productinfo").html(htm);
    }
    });
    Edit: Leider verschluckt das Forum die Zeilenumbrüche. Ich habe den Code deshalb als Text ohne Tags eingefügt. Dabei gehen wiederum die Einrückungen verloren :(

    Zitat

    Den Code verstehe ich nicht wirklich da mir das Wissen von jQuery oder allgemein Javascript einfach fehlt.


    Da bist Du auf dieser Website gleich an der richtigen Adresse: Sie enthält nicht nur dieses Forum sondern auch umfangreiche Anleitungen, mit denen man sich das Wissen erarbeiten kann.



    Was jQuery betrifft, braucht man nur wenig Grundlagenwissen, um es anzuwenden und kann sich alles, was man braucht, jeweils aus dem Handbuch heraus lesen. Der Kern ist die Funktion $. Übergibt man ihr einen CSS-Selektor, ermittelt sie ein Array mit den passenden Elementen. Darauf kann man dann diverse Funktionen anwenden, z. B. attr(), um ein Attribut bei den Elementen zu setzen oder auszulesen.

  • Vielen Dank für deinen Support!
    Es funktioniert genau so wie es sein soll. Jetzt möchte ích noch die nächsten Reihen hinzufügen. Das Prinzip habe ich so verstanden und bekomme das auch hin. Was mich noch interessiert ist die Frage ob es auch mit jQuery möglich ist eine Vorselektion zu tätigen? Z.B.: Nach Klick auf das 2 Bild in der ersten Reihe ist das 3 und 4 Bild in der 2 Reihe nicht mehr wählbar? Die Grafik wird getauscht und ein Klick darauf ist nicht mehr möglich.

  • Zitat

    Nach Klick auf das 2 Bild in der ersten Reihe ist das 3 und 4 Bild in der 2 Reihe nicht mehr wählbar

    Muss das erweiterbar sein, d. h. gibt es eine 3. Reihe, müssen dort auch Bilder gesperrt werden, gibt es eine 4. ebenso usw.? Und wie werden diese Bilder fest gelegt, sind sie vollkommen frei wählbar oder können die Positionen berechnet werden?

    Zitat

    Die Grafik wird getauscht und ein Klick darauf ist nicht mehr möglich.

    Worauf soll das zutreffen, auf das geklickte Bild in der 1. Reihe oder auf die anderen Bilder?

  • @page { margin: 2cm }
    p { margin-bottom: 0.25cm; line-height: 120% }



    Muss das
    erweiterbar sein, d. h. gibt es eine 3. Reihe, müssen dort auch
    Bilder gesperrt werden, gibt es eine 4. ebenso usw.? Und wie werden
    diese Bilder fest gelegt, sind sie vollkommen frei wählbar oder
    können die Positionen berechnet werden?


    Ja, das ist auch in
    der 3 und 4 Reihe so. Beispiel: Wenn Reihe 1 Bild 2 dann von Reihe 2
    nur noch Bild 3 und 4 sowie Reihe 3 Bild 1 und Reihe 4 Bild 2. Die
    Positionen können berechnet werden.





    Worauf soll das
    zutreffen, auf das geklickte Bild in der 1. Reihe oder auf die
    anderen Bilder?


    Auf die Artikel die
    dann nicht mehr möglich sind. Beispiel: Wenn Reihe 1 Bild
    2 dann von Reihe 2 nur noch Bild 3 und 4 Grafik 1 und 2 der Reihe 2
    sollte dann nicht mehr wählbar sein und der Artikel wird mit einem
    anderen Image dargestellt so das ersichtlich ist das diese Position
    nicht mehr zu der Auswahl aus Reihe 1 passt.

    Muss das erweiterbar sein, d. h. gibt es eine 3. Reihe, müssen dort auch Bilder gesperrt werden, gibt es eine 4. ebenso usw.? Und wie werden diese Bilder fest gelegt, sind sie vollkommen frei wählbar oder können die Positionen berechnet werden?

    Worauf soll das zutreffen, auf das geklickte Bild in der 1. Reihe oder auf die anderen Bilder?

  • Wie lautet denn die Rechenvorschrift? Aus den Beispielen kann ich kein System erkennen?


    Es ist eine Bedingung die Geprüft werden sollte. Ich dachte an einen Parameter der im Bild/Artikel hinterlegt wird um dann eben per if () auf Kompatibilität geprüft werden sollte so das nur passende Artikel angezeigt werden. Via PHP und Serverseitiger Prüfung ja kein Problem wenn da das ewige auf weiter klicken nicht wäre. jQuery machts hoffentlich möglich aber da bin ich halt Anfänger in der allerersten Stufe.

  • Zitat

    Wie kann ich Dir eine gute Flasche Wein zukommen lassen?

    Das ist nicht nötig, ich bin im Ruhestand und Programmieren macht mir Spaß ;)



    Ich musste aufpassen, mich bei den Indizes und Klammern nicht zu verlaufen, aber jetzt habe ich etwas ausgearbeitet:




    <div id="row1" class="row">
    <img class="productimg"
    src="http://lorempixel.com/output/abstract-q-g-200-200-10.jpg"
    data-src-sel="http://lorempixel.com/output/abstract-q-c-200-200-8.jpg"
    data-src="http://lorempixel.com/output/abstract-q-g-200-200-10.jpg"
    data-name="Name1-1" data-price="8,50">
    <img class="productimg"
    src="http://lorempixel.com/output/abstract-q-g-200-200-7.jpg"
    data-src-sel="http://lorempixel.com/output/abstract-q-c-200-200-9.jpg"
    data-src="http://lorempixel.com/output/abstract-q-g-200-200-7.jpg"
    data-name="Name1-2" data-price="11,50">
    <span class="productinfo"></span>
    </div>
    <div id="row2" class="row">
    <img class="productimg" src="http://lorempixel.com/output/abstract-q-g-200-200-10.jpg" data-src-sel="http://lorempixel.com/output/abstract-q-c-200-200-8.jpg" data-src="http://lorempixel.com/output/abstract-q-g-200-200-10.jpg" data-name="Name2-1" data-price="8,50">
    <img class="productimg" src="http://lorempixel.com/output/abstract-q-g-200-200-7.jpg" data-src-sel="http://lorempixel.com/output/abstract-q-c-200-200-9.jpg" data-src="http://lorempixel.com/output/abstract-q-g-200-200-7.jpg" data-name="Name2-2" data-price="11,50">
    <img class="productimg" src="http://lorempixel.com/output/animals-q-g-200-200-8.jpg" data-src-sel="http://lorempixel.com/output/animals-q-c-200-200-8.jpg" data-src="http://lorempixel.com/output/animals-q-g-200-200-8.jpg" data-name="Name2-3" data-price="17,50">
    <img class="productimg" src="http://lorempixel.com/output/animals-q-g-200-200-2.jpg" data-src-sel="http://lorempixel.com/output/animals-q-c-200-200-2.jpg" data-src="http://lorempixel.com/output/animals-q-g-200-200-2.jpg" data-name="Name2-4" data-price="19,50">
    <span class="productinfo"></span>
    </div>
    <style>
    .productinfo {
    display: inline-block;
    width: 200px;
    height: 200px;
    vertical-align: top;
    }
    </style>
    <script>
    var imglocked = "http://lorempixel.com/output/technics-q-g-200-200-5.jpg";
    var tolock = {
    // +-- Index des geklickten Bildes in der 1. Zeile
    // | +-- Index der Folgezeile
    // | | +-- Index des 1.zu sperrenden Bildes
    // | | | + --Index des 2. zu sperrendes Bildes
    // | | | |
    0: { 1: [0, 2] },
    1: { 1: [1, 3] }
    };
    var rows = $("div.row");
    $(".productimg").on("click", function () {
    var lock = false;
    if ($(this).hasClass("active")) {
    $(this).removeClass("active");
    $(this).attr("src", $(this).attr("data-src"));
    $(this).siblings("span.productinfo").html("");
    } else {
    lock = true;
    var selimg = $(this).siblings(".productimg.active");
    selimg.attr("src", selimg.attr("data-src")).removeClass("active");
    $(this).addClass("active");
    $(this).attr("src", $(this).attr("data-src-sel"));
    var htm = $(this).attr("data-name") + "<br>";
    htm += $(this).attr("data-price");
    $(this).siblings("span.productinfo").html(htm);
    }
    var ctolock = tolock[$(this).index()];
    rows.each(function (irow) {
    if (irow > 0) {
    var row = $(this);
    $(this).children(".productimg").each(function (iimg) {
    if (ctolock[irow].indexOf(iimg) != -1 && lock) {
    $(this).attr({ "src": imglocked, "data-locked": "true" });
    } else {
    $(this).attr({ "src": $(this).attr("data-src"), "data-locked": "false" });
    }
    });
    }
    });
    });
    </script>


    Leider wieder ohne Tags, aber es ging nicht anders. Benutze
    http://jsbeautifier.org/


    um das Javascript neu zu formatieren.

  • Vielen Dank.
    Ich bin echt überwältigt was du da so ablieferst!
    Sorry für meine späte Antwort aber ich muss schauen das ich mich nicht überfordere und muss diesbezüglich immer wieder etwas längeren Abstand nehmen. Bin halt noch nicht Fit und kämpfe mit meiner Erkrankung! Setze mich aber jetzt dann mal eine Stunde hin und versuche deinen Code zu verstehen. Melde mich dann wieder und hoffe auf weitere Hilfe! Trotzdem würde ich dir gerne was gutes tun und Dir einen edlen Tropfen aus Italien zukommen lassen.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!