jquery - 更改bg圖像的單獨的div與鏈接

我想單擊鏈接時具有div更改的背景圖像，但以下不起作用。如果可能的話，它也會喜歡它褪色...jquery - 更改bg圖像的單獨的div與鏈接

<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>

來源

2012-05-22 tstrebeck

你過早地綁定了。你需要指導的jQuery等到文檔準備好之前，你嘗試附加任何處理程序：

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

演示：http://jsfiddle.net/ATrF6/1/

來源

2012-05-22 16:49:03 Sampson

完美的作品，但是，現在我意識到我需要改變的類！我試過這個： '$（「＃banner」）。addClass（「other」）;' 但這不起作用。 – tstrebeck

@tstrebeck這就是你如何添加一個類：http://api.jquery.com/addClass/ – Sampson

根據css的特殊性，你所追加的類可能不會做任何事情。例如，如果你有一個類定義爲'.bluebg {background：url（img/blue.jpg）; }'它不會改變'＃banner'元素的背景。它需要被定義爲'＃banner.bluebg {background：url（img/blue.jpg）}' – lucuma

jquery - 更改bg圖像的單獨的div與鏈接

回答

相關問題