用jQuery設置css背景圖片

嘗試在單擊標題時切換兩個圖像。對於初學者，我甚至無法讓他們展示。有任何想法嗎？用jQuery設置css背景圖片

<h2 class="expand" id="content-1" style="cursor:pointer;" value="One">Click to expand One</h2> 
<h2 class="expand" id="content-2" style="cursor:pointer;" value="Two">Click to expand Two</h2>

以下試過，但沒有到目前爲止。

$('.expand').on('click', function() { 
       if($(this).text().indexOf('expand') >0) 
       $(this).text('Click to collapse ' + $(this).attr("value")); 
       $('.expand').css('background-image', 'url(' + img/arrow-up.gif + ')'); 
       else 
        $(this).text('Click to expand ' + $(this).attr("value")); 
       $('.expand').css('background-image', 'url(' + img/down-up.gif + ')'); 
      });

和

$(this).text('Click to collapse ' + $(this).attr("value") + $(this).css...);

來源

2014-02-14 user3191137

你的圖像css被註釋掉了。僅供參考，您通常會通過圖像精靈來處理這個問題，而不是直接交換CSS，只需交換重新定位精靈的類名即可。 –

現在它沒有註釋，但是你試圖附加一個名爲「img/arrow-up.gif」的變量。這是行不通的。它應該都只是一個字符串。 –

@Diodeus語法仍然可以是probelm。 '（'+ img/arrow-up.gif +'）'是正確的？ @DA固定 – user3191137

你最簡單的選擇是開關類名和CSS定義圖像。

$('.expand').toggleClass('someClass') 


.someClass { 
    background-image:url(...); 
}

來源

2014-02-14 21:58:18

此：

$('.expand').css('background-image', 'url(' + img/arrow-up.gif + ')');

可能的應該是這樣的：

$('.expand').css('background-image', 'url("img/arrow-up.gif")');

但我第二次Diaodeus這一點應在CSS可以只具備和你的jQuery簡單地交換類名稱。我也會把你的圖像變成一個精靈，所以它只是一個圖像。

來源

2014-02-14 22:01:13

用jQuery設置css背景圖片

回答

相關問題