JavaScript jQuery: Bild innerhalb von div mit bestimmtem "alt" wert finden

[razer]

Hallo,

ich bin noch relativ neu im umgang mit jQuery, aber so einiges klappt schon...manches aber garnicht. Beispiel:

<div #id="gallery>
   <img src="bild1.jpg" alt="-100">
   <img src="bild2.jpg" alt="-200">
   <img src="bild3.jpg" alt="-300">
</div>

ich suche jetzt den jQuery selector um z.B. das Bild mit alt="-200" auszuwählen und desen "opacity" zu ändern.

Um noch kurz zu sagen was ich genau vor hab:
Ich habe eine Galerie mit Bildern die in einem div von rechts nach links sliden.
Unter der Galerie sind Thumbnails der Bilder, die opacity: 0.5 haben...wärend das div nun slided soll das gerade gezeigte Bild in den Thumbnails opacity: 1.0 bekommen.

Ich hoffe das war verständlich. thx razer

 

[Tumbleweed]

Müsste mit

$('#gallery img[alt="-200"]')

funktionieren.

Dein div ist übrigens falsch definiert. Soll wohl

<div id="gallery">

sein.

 

[razer]

Supi danke, funktioniert schon mal

Das mit der #id war nur ein Tippfehler bei der Eingabe hier.

eine frage noch:

var wert = "123";
$('#gallery img[alt='wert']')


wie kann ich den alt mit der variable auslesen?

EDIT:

ah ok habs schon selbst gesehen....die + vergessen - trotzdem danke

 

[Tumbleweed]

Das wäre dann wohl

$('#gallery img[alt="' + wert + '"]')

 

[IceMatrix]

Was du da mit dem alt-Attribut machst ist nicht sehr clever. Das ist eigentlich als Alternativtext gedacht wenn der Benutzer in sienem Browser die Bilder deaktiviert hat oder das Bild nicht geladen werden kann. Stattdessen bekommt er bei dir irgendwelche Zahlen angezeigt.

Wenn du die Bilder sowieso mit -100, -200, -300, .. durchnumerierst, dann kannst du sie auch anders per Selektor finden:

$("#gallery img:nth-child(X)") mit X = 1 .. N

 

[ice-breaker]

HTML5 spezifiziert dafür die schönen data-Container bei denen man zu jedem Element noch Daten speichern kann, die fürs Rendering irrelevant sind, aber für JS sein können:

<div id="gallery">
   <img src="bild1.jpg" data-num="-100">
   <img src="bild2.jpg" data-num="-200">
   <img src="bild3.jpg" data-num="-300">
</div>

$('#gallery img:data("num=-100")')

und es existiert in jQuery auch extra ein Selektor (Plugin) dafür, ist also somit aktuell die optimalste Lösung
Ansonsten eben über die normalen CSS3-Selektoren, wie von Tumbleweed gezeigt.

 

[IceMatrix]

HTML5 wird leider von vielen Browser noch nicht oder nur teilweise unterstützt. Würde ich bis auf weiteres wenn überhaupt nur für mobile Browser verwenden.

 

[ice-breaker]

es wird wunderbar unterstützt, denn es verhält sich wie HTML4
Nur Dinge, die ein Browser nicht kennt, werden eben ignoriert.

So wird der von mir genannte data Container wie auch zu HTML4 Zeiten verarbeitet: er wird beim Rendern einfach nicht beachtet (custom attribute not in specs) aber per JS hat man Zugriff auf das Attribut.
Also wunderbar