jQuery selektor

Zitat

wird also nach der Auswahl dargestellt mit Preis und Name im separaten <td>

Soll diese Zelle als letzte in der Reihe mit den Bilder angezeigt werden?

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

<div id="row1">            <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>
        <style>
            .productinfo {
                display: inline-block;
                width: 200px;
                height: 200px;
                vertical-align: top;
            }    
        </style>
        <script>
            $(".productimg").on("click", function() {
                if ($(this).hasClass("active")) {
                     $(this).removeClass("active");
                     $(this).attr("src", $(this).attr("data-src"));
                } 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);
                }
            });         </script>

Hast Du auch jQuery eingebunden? Ich hatte den Code getestet und er funktioniert.

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.

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?

Verstehe ich soweit, bis auf dieses:

Zitat

Die Positionen können berechnet werden.

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

OK, ich arbeite etwas aus ...

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.

Ich habe es lieber bei pastebin eingestellt, denn ich hatte die Struktur tolock mit Kommentaren versehen, die nur lesbar sind, wenn die Einrückungen stimmen:
http://pastebin.com/AxxmV32F