用jQuery改變背景圖片不起作用

有人可以幫我理解爲什麼這段代碼不工作嗎？用jQuery改變背景圖片不起作用

$('#quick-search-header.widget-title').css('background-image', 'url(dd_includes/images/icons/sliding-menu-arrow-right.gif)');

我通過螢火蟲看到背景圖像已經從#quick-search-header.widget-title完全去除，但上面的新的背景圖像被添加到element.style。謝謝。

HTML -

<div id="quick-search-header" class="widget-title"> 
    <p>Quick search results</p> 
</div>

CSS -

#quick-search-header.widget-title{ 
    background: #C60B46 url(dd_includes/images/icons/sliding-menu-arrow-down.gif) right 3px no-repeat; 
}

完全JS（錯誤代碼標記） -

$(document).ready(function(){ 

    $('input#s').val(''); 

    $('#quick-search-header.widget-title').live('click', function(){ 

     if($('#quick-search-content').hasClass('visible')){ 

      $('#quick-search-header.widget-title').css('background-image', 'url(dd_includes/images/icons/sliding-menu-arrow-right.gif)'); /** Not working */ 
      $('#quick-search-content').removeClass('visible') 
      $('#quick-search-content').slideUp('600'); 

     } else { 

      $('#quick-search-header.widget-title').css('background-image', 'url(dd_includes/images/icons/sliding-menu-arrow-down.gif)'); /** Not working */ 
      $('#quick-search-content').addClass('visible') 
      $('#quick-search-content').slideDown('600'); 

     } 

    }); 

});

來源

2012-07-17 David Gard

你說它已被添加到element.style，這是正確的。你認爲什麼不起作用？ – 2012-07-17 14:22:10

適合我使用.http：//jsfiddle.net/FN3uE/檢查圖片url是否導致404狀態 – Chandu 2012-07-17 14:25:34

只是一個附註：爲什麼選擇'＃quick-search-header.widget-title' ？由於'＃quick-search-header'是一個ID，只用它作爲選擇器就足夠了。 – 2012-07-17 14:25:51

通過jQuery中的css('attributename','attributevalue')功能設置的任何值將添加屬性爲元素的內聯樣式。在檢查其通常標記爲element.style

如果需要通過類來完成這一僅則可以創建一個單獨的類在交替的背景圖像，並通過添加/從元件去除類別切換類，這將不會出現在element.style中，相反，它只會切換該類，而不會在檢查器中顯示。

你甚至可以使用toggleClass()函數，它可以讓你打開或關閉特定或多個類。

文檔如下：

toggleClass

addClass

removeClass

或者你甚至可以通過使用.attr('class','newClassName');

取決於你在元素上設置的屬性做。

來源

2012-07-17 14:25:04

謝謝你，解釋是非常很有幫助，而且我創建了第二個類來切換，而不是僅僅交換backgournd-image，所以現在一切都正常。 – 2012-07-17 14:35:46

嘗試;

$('#quick-search-header.widget-title').css({'background-image':'url(dd_includes/images/icons/sliding-menu-arrow-right.gif)'});

希望這有助於... :)

來源

2012-07-17 14:34:33

嗯，我幾乎可以肯定這是錯誤的，'''''''''''''''''函數應該是''，因爲它是分離參數。 – 2012-07-17 14:37:39

我試過這個，發現工作... – 2012-07-17 14:39:17

嗯有趣的是，我沒有看到之前使用這種方法的語法，我會研究它。 – 2012-07-17 14:40:33

確保相對路徑是正確的。檢查的10倍對當前位置的相對路徑：的javascript：

window.location.pathname
嘗試： 首先定義的CSS爲：

。XXX {背景圖像：網址（）}

然後在JavaScript：

將backgroundImage = 「URL（ '../圖像/ image.png'）」; //注意單引號

$（XXX）.css（「background-image」，backgroundImage）;
//或
$（XXX）.css（{「background-image」：backgroundImage}）;

來源

2012-11-22 16:36:49 jama

用jQuery改變背景圖片不起作用

回答

相關問題