jquery: cambio de imagen bg de div separado con enlace

Quiero que la imagen de fondo de un div cambie cuando se hace clic en un enlace, pero lo siguiente no funciona. También me gustaría que se desvaneciera si eso es posible...

<style type="text/css>
    #banner { background: url(img/img.jpg); }
</style>

<script type="text/javascript">
    $('#change').click(function () {
        $('#banner').css("background-image", "url(img/otherImage.jpg)");
    });
</script>

<div id="banner">
    stuff
</div>

<div id="container">
    <div id="leftCol">
        <a href="#" id="change">Change</a>
    </div>
    <div id="rightCol">
    </div>
</div>

preguntado el 22 de mayo de 12 a las 17:05

1 Respuestas

Te estás vinculando demasiado pronto. Debe indicar a jQuery que espere hasta que el documento esté listo antes de intentar adjuntar cualquier controlador:

$(function(){
    $("#change").on("click", function (e) {
        e.preventDefault();
        $("#banner").css("background-image", "url('img/otherImage.jpg')");
    });
});

Demostración: http://jsfiddle.net/ATrF6/1/

contestado el 22 de mayo de 12 a las 17:05

Eso funciona perfectamente, sin embargo, ¡ahora me doy cuenta de que necesito cambiar la clase! Intenté esto: $("#banner").addClass("other"); pero eso no está funcionando. - tstrebeck

Dependiendo de la especificidad del css, es posible que la clase que está agregando no haga nada. Por ejemplo, si tiene una clase definida como .bluebg { background: url(img/blue.jpg); } no cambiará el fondo de la #banner elemento. Habría que definirlo como #banner.bluebg {background: url(img/blue.jpg)} - lúcuma

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.