JQuery-Rollovers mit mehreren IDs und Klassen

Question

Ich baue eine Fotogalerie und was ich gerne machen würde, ist es, dass wenn der Benutzer über ein Bild rollt (sagen wir für die Zwecke dieser Frage, es ist ein Bild von einem Apfel), auch alle anderen Bilder von Äpfeln auf der Seite ihren "mouseover"-Zustand zeigen.

Jede Hilfe wäre sehr dankbar und vielen Dank im Voraus für Ihre Zeit!

Answer 1

Sie könnten den 'Typ' des Bildes als Klasse hinzufügen. Zum Beispiel wird ein Apfel folgendermaßen aussehen:

Sie können so viele durch Leerzeichen getrennte Klassen hinzufügen wie Sie möchten.

Dann fügen Sie den folgenden Handler hinzu:

$(".apple").mouseover(function() {
   $(".apple").addClass("overState");
});

Sie müssen in Ihrem CSS den overState definieren. Beim Mouseout müssen Sie die Klasse entfernen.

Answer 2

Also hat jedes Bild eine Anzahl von Tags (z. B. "Apfel", "rot", "groß") und wenn Sie über den großen roten Apfel fahren, möchten Sie, dass alle anderen Äpfel, großen Dinge und roten Dinge aufleuchten?

Wie kgiannakakis vorgeschlagen hat, würde ich diese Daten in das Klassenattribut des Bildes einfügen - der einzige Unterschied besteht darin, dass ich jeder Klasse etwas voranstellen würde, damit es nicht mit anderen Klassen auf Ihrer Seite kollidiert.

Ich habe auch eine zusätzliche Klasse namens "tagged" hinzugefügt, damit Sie Ihre markierten Fotos von Navigationsbildern oder ähnlichem unterscheiden können.

$('img.tagged')
    .each(function() {
        var thisClasses = this.className.split(/s+/); // Array von Klassen.
        var search = [];
        for (var i = 0; i < thisClasses.length; ++i) {
            if (thisClasses[i].substr(0, 4) == "tag-") {
                search.push("." + thisClasses[i]);
            }
        }
        $(this).data("tags", search.join(","));  // ".tag-big,.tag-red,.tag-apple"
    })
    .hover(function() {
        $('img.tagged')
            .filter(this.data('tags'))
            .addClass("highlight")
        ;
    }, function() {
        $('img.tagged')
            .filter(this.data('tags'))
            .removeClass("highlight")
        ;
    })
;

Was dies zunächst durchläuft sind alle Ihre markierten Bilder und ermittelt, welche Tags auf jedem davon sind, diese in das data() dieses Elements speichert. Das bedeutet, dass wir das nur einmal machen müssen und nicht jedes Mal.

Dann fügt es jedem markierten Bild ein hover-Ereignis hinzu, um alles zu finden, was mit einem der Tags dieses Bildes übereinstimmt und die Klasse "highlight" hinzuzufügen. Ebenso entfernt es die Klasse, wenn Sie den Mauszeiger herausbewegen.

Answer 3

Wenn es sich um Links (Anker-Tag) handelt, benötigen Sie kein jQuery, um dies zu tun. Sie können :hover in CSS verwenden.

a.apple:hover img {
  /* was auch immer du hier ändern möchtest */
}

EDIT: Ignoriere mich. Das ändert nicht alle Apfel-Elemente auf der Seite gleichzeitig. Das passiert, wenn ich spät in der Nacht müde auf SO herumschnüffele.

Answer 4

Bildquelle ändern

Diese Methode würde tatsächlich die Bildquellen auf eine einheitliche Weise ändern, anstatt nur eine Klasse darauf anzuwenden.

function swapImageGroup(imgSelector,suffix){
if (suffix == null) {suffix = "-hover";}
//imgSelector ist der zu verwendende jQuery-Selektor
//sowohl imgSelector als auch suffix müssen Zeichenketten sein
$(selector).hover(
   function() {
      $(selector).each(function(){
      //speichern von ".jpg" oder ".png" oder was auch immer als Dateierweiterung
      var fileExtension = $(this).attr("src").substr($(this).attr("src").lastIndexOf("."));
      //ersetzt etwas wie ".jpg" durch etwas wie "-hover.jpg",
      //unter der Annahme, dass suffix == "-hover"
      $(this).attr("src", $(this).attr("src").replace(fileExtension, suffix + fileExtension));
    });
    },
    function() {
      $(selector).each(function(){
      //entfernt das Ende des Dateinamens, beginnend bei "-hover" (oder was auch immer)
      //und setzt die ursprüngliche Erweiterung wieder drauf
      $(this).attr("src", $(this).attr("src").split(suffix + ".").join("."));
      });
    }
);
}

Also würdest du die Funktion so verwenden:

swapImageGroup("img.apple");

oder

swapImageGroup("img.foo","-active");