Ich habe gesucht, bin aber leer und frage mich, ob ich eine jQuery-Anweisung verwenden kann, um mehrere Elemente auf einer Seite auszurichten. Ich habe mehrere identische Schaltflächen auf einer Seite und sie bestehen jeweils aus einem linken, mittleren und rechten Hintergrund, wobei die Mitte den Text enthält und auf jede erforderliche Größe erweitert werden kann. Jeder hat eine eindeutige ID und / oder Klasse. Ich habe es jetzt so eingestellt, dass sich die 3 Hintergründe ändern, wenn Sie den Mauszeiger über das jeweilige Container-Div bewegen, um den Eindruck zu erwecken, dass sich die Schaltflächen in einem anderen Zustand befinden. Die Art und Weise, wie es jetzt gemacht wird, ist mit einem Schwebeaufruf für jede Schaltfläche, die sich in der Klasse befindet (ich würde lieber eine ID verwenden, aber Sie können nicht mehrere Elemente mit derselben ID haben). Diesem Schwebeflug folgen 8 Ereignisse. Eine Hintergrundänderung für jedes rechte linke und mittlere und eine Farbänderung für den mittleren Text.

Das bedeutet viele Codezeilen. Ich möchte, dass alle Schaltflächen gleichzeitig mit dem Hover-Ereignis aufgerufen werden oder dass das Hover-Ereignis weiß, über welche Schaltfläche der Mauszeiger bewegt wird, und dass die Klasse oder ID oder sogar der Name zurück an jQuery übergeben wird, wodurch sich das ändern kann Schaltflächen Unterklassen für rechts links und Mitte. Die Unterklassen für rechts, links und Mitte sind auf allen Schaltflächen identisch. Wenn sich das Hover-Ereignis also auf das Ereignis konzentrieren könnte, das es aufgerufen hat, würde ich nur eine Reihe von Aufrufen benötigen, um die Hintergrundattribute zu ändern ... Der aktuelle Code ist unten für zwei der Knöpfe ...

$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)"});
        }
    );