Szukałem, ale wyszedłem puste i zastanawiam się, czy mogę użyć jednej instrukcji jQuery do kierowania wielu elementów na stronie. Mam kilka identycznych przycisków na stronie i każda z nich składa się z lewego, środkowego i prawego tła, gdzie środek zawiera tekst i można go rozszerzyć do dowolnego rozmiaru. Każdy ma unikalny identyfikator i / lub klasę. Teraz ustawiam go tak, aby po najechaniu kursorem na ich pojemnik div 3 tła zmieniły się, dając wrażenie, że przyciski są w innym stanie. Sposób, w jaki jest teraz wykonywany, polega na wywołaniu 1 hovera dla każdego przycisku, który znajduje się według klasy (raczej używa identyfikatora, ale nie można mieć wielu elementów o tym samym identyfikatorze). Po tym zawisie następuje 8 zdarzeń. Zmiana tła dla każdego prawego i lewego środka oraz zmiana koloru dla tekstu środkowego.

Oznacza to wiele linii kodu. Chcę wywołać wszystkie przyciski jednocześnie ze zdarzeniem hover lub mieć zdarzenie na zawisie w jakiś sposób wiedzieć, który przycisk jest zawisany i rzucić tę klasę lub id, a nawet nazwę z powrotem do jQuery, która może następnie zmienić podklasy przycisków dla prawej i lewej. Podklasa dla lewej i środkowej jest identyczna na wszystkich przyciskach, więc jeśli zdarzenie hover może być skupione na jakimkolwiek zdarzeniu nazywanym tym, potrzebuję tylko jednego zestawu wywołań, aby zmienić atrybuty tła ... Obecny kod jest poniżej dla dwóch przycisków ...

$j(".learnMoreButton").hover(
    function () { 
        $j('.learnMoreButton .buttonLeft').css({background:"url(/images/concaveBtn-Left2.gif)"}); 
        $j('.learnMoreButton .buttonMiddle').css("background-image", "url(/images/concaveBtn-Middle2.gif)"); 
        $j('.learnMoreButton .buttonMiddle a').css({color:"#ffffff"});
        $j('.learnMoreButton .buttonRight').css({background:"url(/images/concaveBtn-Right2.gif)"});
    }, 
    function () { 
        $j('.learnMoreButton .buttonLeft').css({background:"url(/images/concaveBtn-Left.gif)"});
        $j('.learnMoreButton .buttonMiddle').css("background-image", "url(/images/concaveBtn-Middle.gif)"); 
        $j('.learnMoreButton .buttonMiddle a').css("color", "#666");
        $j('.learnMoreButton .buttonRight').css({background:"url(/images/concaveBtn-Right.gif)"});
        }
    );

$j(".bioButton").hover(
    function () { 
        $j('.bioButton .buttonLeft').css({background:"url(/images/concaveBtn-Left2.gif)"}); 
        $j('.bioButton .buttonMiddle').css("background-image", "url(/images/concaveBtn-Middle2.gif)"); 
        $j('.bioButton .buttonMiddle a').css({color:"#ffffff"});
        $j('.bioButton .buttonRight').css({background:"url(/images/concaveBtn-Right2.gif)"});
    }, 
    function () { 
        $j('.bioButton .buttonLeft').css({background:"url(/images/concaveBtn-Left.gif)"});
        $j('.bioButton .buttonMiddle').css("background-image", "url(/images/concaveBtn-Middle.gif)"); 
        $j('.bioButton .buttonMiddle a').css("color", "#666");
        $j('.bioButton .buttonRight').css({background:"url(/images/concaveBtn-Right.gif)"});
        }
    );