Orientación de elementos múltiples con jQuery

Question

He estado buscando pero he salido en blanco y me pregunto si puedo usar una declaración jQuery para orientar varios elementos en una página. Tengo varios botones idénticos en una página y cada uno está formado por un fondo izquierdo, medio y derecho donde el medio contiene el texto y puede expandirse a cualquier tamaño necesario. Cada uno tiene un Id y/o clase únicos. Lo tengo configurado ahora para que cuando muevas el mouse sobre su div contenedor los 3 fondos cambien para dar la apariencia de que los botones están en un estado diferente. La forma en que se hace ahora es con 1 llamada activada para cada botón que está ubicado por Clase (preferiría usar ID pero no puede tener múltiples elementos con la misma ID). Este hover es seguido por 8 eventos. Un cambio de fondo para cada derecha a la izquierda y el medio y un cambio de color para el texto de los medios.

Esto significa muchas líneas de código. Lo que quiero es poder llamar a todos los botones a la vez con el evento hover o hacer que el evento hover sepa de alguna manera qué botón está sobrevolando y arrojar esa clase o id o incluso el nombre a jQuery, que luego puede cambiar el Subclases de botones para la derecha, la izquierda y el medio. La subclase para la derecha y la media son idénticas en todos los botones, por lo que si el evento de desplazamiento se pudiera enfocar en cualquier evento que se llame, solo necesitaría un conjunto de llamadas para cambiar los atributos de fondo ... El código actual está debajo para dos de los botones ...

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

Answer 1

que puede hacer:

$(".learnMoreButton, .bioButton").hover(function() { 
    $(this).find(".buttonRight")... 
    ... 
}, function() { 
    ... 
}); 

voy a añadir que creo que sería mejor hacerlo con clases CSS.

.buttonLeft { background: url(/images/concaveBtn-Left.gif) } 
.buttonMiddle { background-image: url(/images/concaveBtn-Middle.gif) } 
.buttonMiddle a { color: #666; } 
.buttonRight { url(/images/concaveBtn-Right.gif) } 
.hoverover .buttonLeft { url(/images/concaveBtn-Left2.gif) } 
.hoverover .buttonMiddle { url(/images/concaveBtn-Middle2.gif) } 
.hoverover .buttonMiddle a { color: #FFF; } 
.hoverover .buttonRight { background: url(/images/concaveBtn-Right2.gif) } 

y

$(".learnMoreButton, .bioButton").hover(function() { 
    $(this).addClass("hoverover"); 
}, function() { 
    $(this).removeClass("hoverover"); 
}); 

y usted tendrá mucho menos código.

También se puede dar elementos múltiples clases para:

<div class="bioButton hoverbutton"> 
    ... 
</div> 
<div class="learnMoreButton hoverbutton"> 
    ... 
</div> 

y luego se vuelve aún más simple:

$(".hoverbutton").hover(function() { 
    $(this).addClass("hoverover"); 
}, function() { 
    $(this).removeClass("hoverover"); 
}); 

Answer 2

$j(".learnMoreButton, .bioButton").hover(
    function() { 
     var $this = $j(this); //this points to DOM element hovered, $j() makes jQuery object out of it. 
     //this syntax tells jQuery to search only inside $this element. 
     $j('.buttonLeft', $this).css({background:"url(/images/concaveBtn-Left2.gif)"}); 
     $j('.buttonMiddle', $this).css("background-image", "url(/images/concaveBtn-Middle2.gif)"); 
     $j('.buttonMiddle a', $this).css({color:"#ffffff"}); 
     $j('.buttonRight', $this).css({background:"url(/images/concaveBtn-Right2.gif)"}); 
    }, 
    function() { 
     var $this = $j(this); 
     $j('.buttonLeft', $this).css({background:"url(/images/concaveBtn-Left.gif)"}); 
     $j('.buttonMiddle', $this).css("background-image", "url(/images/concaveBtn-Middle.gif)"); 
     $j('.buttonMiddle a', $this).css("color", "#666"); 
     $j('.buttonRight', $this).css({background:"url(/images/concaveBtn-Right.gif)"}); 
    } 
); 

Answer 3

Actualmente, el código es el siguiente:

$j(function(){ 
    $j(".hoverBTN").hover( 
    function() { 
     $j(this).addClass("hoveroverL"); 
     $j(this).addClass("hoveroverM"); 
     $j(this).addClass("hoveroverR"); 
    }, function() { 
     $j(this).removeClass("hoveroverL"); 
     $j(this).removeClass("hoveroverM"); 
     $j(this).removeClass("hoveroverR"); 
    }); 

}); 

que funciona pero en la e incorrecta lements. En la actualidad, cambia el botón que se cernía sobre pero añade 3 clases a los botones no envoltura para las subclases de izquierda y derecha Medio: Un ejemplo del botón es:

<div id="timelineButton" style="position:relative;" class="hoverBTN" > 
    <div class="buttonLeft"></div> 
    <div class="buttonMiddle">Timeline</div> 
    <div class="buttonRight"></div> 
</div> 

Answer 4

También es posible que desee considerar que no utilizan jQuery o Javascript en absoluto para esto. CSS debería ser suficiente. Simplemente déle a cada botón la misma clase y haga algo como esto en su CSS:

.button .buttonLeft 
{ 
    background: url(/images/concaveBtn-Left.gif) 
} 

.button .buttonMiddle 
{ 
    background: url(/images/concaveBtn-Middle.gif); 
    color: #666; 
} 

.button .buttonRight 
{ 
    background: url(/images/concaveBtn-Right.gif) 
} 

.button:hover .buttonLeft 
{ 
    background: url(/images/concaveBtn-Left2.gif) 
} 

.button:hover .buttonMiddle 
{ 
    background: url(/images/concaveBtn-Middle2.gif); 
    color: #ffffff; 
} 

.button:hover .buttonRight 
{ 
    background: url(/images/concaveBtn-Right2.gif) 
} 

Sin embargo, hay una advertencia; IE (al menos algunas versiones?) No es compatible: pase el mouse sobre los divs. La forma en que lo soluciono es haciendo que un botón sea <a> y coloque los elementos que se van a diseñar dentro del botón como <span> s.

Answer 5

Ok, tengo esto funcionando! Gracias Cletus me enviaste en la dirección correcta ... Tuve que usar el selector de niños en esto, luego elegir a cada niño y cambiar sus clases individuales ... Aquí está el código ...

$j(function(){ 
$j(".hoverBTN").hover( 
function() { 
    $j(this).children('div:nth-child(1)').addClass("hoveroverL"); 
    $j(this).children('div:nth-child(2)').addClass("hoveroverM"); 
    $j(this).children('div:nth-child(3)').addClass("hoveroverR"); 
}, function() { 
    $j(this).children('div:nth-child(1)').removeClass("hoveroverL"); 
    $j(this).children('div:nth-child(2)').removeClass("hoveroverM"); 
    $j(this).children('div:nth-child(3)').removeClass("hoveroverR"); 
}); 

});

Funciona perfectamente de esta manera. Quería algo compacto y fácilmente reutilizable, y creo que esto abarca ambos. Gracias de nuevo a todos ...