無法獲取jQuery代碼來動態更改css

在我的CSS文件，這個工程......

.closed { 
    background-image: url(http://70.55.103.238/Images/menu-collapsed.gif); 
}

我需要能夠使用jQuery動態地改變這一點，所以我在我的$調用這個（文件）。就緒（函數（）。 ..

$('.closed').css({ 'background-image' : 'url(http://'+window.location.host+'/Images/menu-collapsed.gif)' });

如果不是很明顯，我需要做的原因是，我不能使用相對路徑的圖片文件夾和主機不是一個常數。

第一個問題，這是爲什麼jquery調用不是w工作會有？如果我把這樣的警告......

alert('url(http://'+window.location.host+'/Images/menu-collapsed.gif)')

我可以看到網址是正確的，如果我進入了警報顯示的URL直接在地址欄我得到的GIF。所以我相信所傳遞的URL是正確的。我必須假設css沒有變化。

第二個問題，有沒有什麼辦法可以動態獲取.css文件中的主機url，以便我沒有使用jquery？

謝謝。

更新：

我嘗試了以下這只是爲了簡單..

CSS ...

.closed { 
    background-image: url(../Images/menu-collapsed.gif); 
}

的JavaScript ...

$('.closed').css({ 'background-image' : 'url(../Images/menu-expanded.gif)' });

注CSS設置爲使用menu-collapsed.gif和javascri pt將其更改爲men-expanded.gif。但是顯示的圖像是menu-collapsed.gif。

來源

2012-06-15 user278859

不能使用'網址（/圖像/菜單collapsed.gif）'？ – j08691

他可能可以......但他希望能夠動態地改變它 –

@wirey - 如果文件夾結構相同，則該格式會使域不相關。 – j08691

好吧，我明白了這一點。我不確定這是否是由設計，但我發現，我必須重新設置CSS時，我改變了由jQuery CSS控制的類。在我的具體情況中，我在設置了一個.closed類的DOM元素之前設置了圖像。

我實際上有一個由ul元素組成的樹形菜單，它在$（document）.ready（function（）中創建，樹的所有節點都分配了.closed類。（'.closed'）.css（）調用，以便在我將樹添加到DOM後立即執行它，並且它可以正常工作

這同樣適用於用戶單擊時使用的.open類一個封閉的ul。我必須在將類從.closed改爲.open並在改回到關閉之後立即進行$（'。open'）.css調用。

因此，如果我瞭解我所看到的$（'。closed'）。css不能像css一樣持久地改變，就像手動輸入腳本一樣。我解釋這種關係嗎？

如果任何人有興趣在這裏是什麼樣的我的jQuery現在看起來像名爲.css（）調用，他們正在...

$(document).ready(function() { 
    $.get('treeMenu.xml', function(d) { 

     function makeMenu($xml) { 
      var markup = ""; 
      function processXml() { 
       //CODE TO PARSE XML INTO MENU TREE IN MARKUP VAR 
      } 
      $xml.children().each(processXml); 
      return markup; 
     } 

     tree = makeMenu($(d)); 
     $('div.treeMenu').append(tree); 
     //HAD TO PUT THE CSS CALL HERE FOR IT TO WORK 
     $('.closed').css({backgroundImage: "url(http://"+window.location.host+"/Images/menu-collapsed.gif)"}); 

     $('.treeMenu ul,li').each(function() { 
      if ($(this).hasClass("leaf")) { 
       $(this).click(function() { 
        //CODE FOR CLICK ON LEAFS 
       }); 
      }else { 
       $(this).click(function() { 
        if ($(this).hasClass("closed")) { 
         $(this).removeClass("closed").addClass("open"); 

         //HAVE TO PUT THIS HERE FOR EVERY CLICK TO GET A CHANGE IN THE GIF 
         $('.open').css({backgroundImage: "url(http://"+window.location.host+"/Images/menu-expanded.gif)"}); 

       } else if ($(this).hasClass("open")) { 
         $(this).removeClass("open").addClass("closed"); 

         //HAVE TO PUT THIS HERE FOR EVERY CLICK TO GET A CHANGE IN THE GIF 
         $('.closed').css({backgroundImage: "url(http://"+window.location.host+"/Images/menu-collapsed.gif)"}); 

       } else { 
         $(this).addClass("open"); 

         //HAVE TO PUT THIS HERE FOR EVERY CLICK TO GET A CHANGE IN THE GIF 
         $('.open').css({backgroundImage: "url(http://"+window.location.host+"/Images/menu-expanded.gif)"}); 
       } 
      }); 
     }  
     });  
    }); 
});

來源

2012-06-15 07:34:41 user278859

它正常工作對我來說：

http://jsfiddle.net/gopi1410/UscLn/

檢查控制檯的任何錯誤&檢查.closed div來檢查其背景圖像是否有變化。

來源

2012-06-15 03:07:10 gopi1410

我在控制檯中沒有收到任何錯誤。 gif不顯示。我用螢火蟲並不是很好，但是看着螢火蟲中的所有東西，html和css在工作時都和我一樣。如何檢查.closed div以查看背景圖像是否已更改。 – user278859

我添加了對我的問題的更新，以顯示我使用相對路徑指向圖像文件夾的簡單測試。它應該只是工作。 – user278859

無法獲取jQuery代碼來動態更改css

回答

相關問題