- 就像在這個小提琴一樣簡單嗎？

Question

在這裏的提琴http://jsfiddle.net/mjmitche/KvwGw/21/，當您提交表單時，將出現一個新表單，並且背景顏色也會發生變化。

在wordpress博客上，我試圖在提交表單時更改背景圖片。圖像被上傳到這裏的服務器

www.example.com/wp-content/themes/thesis_18/custom/images/strawhat.jpg 

，然後它使用的CSS（在我的自定義wordpress主題）像這樣

body.custom { 
    background: #8db6b6 url('images/subway.jpg') repeat; 
} 

在我的愚蠢顯示，我最初試圖使背景圖像變化使用下面的代碼失敗，但因爲背景圖像上傳到服務器，我現在意識到/認爲需要一些Ajax來更改提交背景圖像，但我一直無法弄清楚如何去做

有誰知道我會怎樣使ajax調用來做到這一點？

$("#submit").click(function(){ 
    $(".contactform").hide(1000,function(){ 
     $(".contactforms").css({display:"block"}); 
     $("body.custom").css({background: "url('images/strawhat.jpg') repeat;"}); 
    }); 
    }); 

$("#send").click(function(){ 
    $(".contactforms").hide(1000) 
     }); 

UPDATE 我想這（寫出來的路徑），第一響應者的建議下，但沒有奏效。

$("#submit").click(function(){ 
    $(".contactform").hide(1000,function(){ 
     $(".contactforms").css({display:"block"}); 
     $("body.custom").css({background: "url('/wp-content/themes/thesis_18/custom/images/strawhat.jpg') repeat;"}); 

    }); 
    }); 

$("#send").click(function(){ 
    $(".contactforms").hide(1000) 
     }); 

Answer 1

問題出在圖像路徑。

在原始CSS文件中，指定的路徑是相對於該CSS文件。因此，CSS文件位於www.example.com/wp-content/themes/thesis_18/custom/，然後指定'images/subway.jpg'，因爲圖片網址將從www.example.com/wp-content/themes/thesis_18/custom/images/subway.jpg加載它。

但是，當您使用JQuery更改樣式時，您的新樣式未在CSS文件中設置，因此其URL不與該樣式表相關。

我會想象你需要設置相對於主頁面的背景圖像URL，因爲在運行時沒有其他可以相對的上下文。我建議，最好的辦法是使用一個完全合格的路徑從您的域的根目錄，反斜槓開始的，就像這樣：

$("body.custom").css({background: "url('/wp-content/themes/thesis_18/custom/images/strawhat.jpg') repeat;"}); 

這將迫使它得到正確的圖像。

希望能幫助解釋一些事情。

[編輯]至於由OP的評論，稱他仍然無法得到它的工作：

假設所有的路徑是正確的，這應該有工作。我無法證明這一點，也沒有解釋爲什麼它沒有真正看到一個非工作的例子就無法工作，但我可以給你一些關於如何追蹤問題原因的建議。

該建議是使用Firebug。 （或其他任何與其他瀏覽器一起提供的開發工具，但Firebug仍然是我的最愛）。

Firebug是一個基於瀏覽器的調試工具，它有幾個功能，您可以使用它來跟蹤問題。

首先，它有一個「網絡」選項卡，它允許您監視何時發出HTTP請求以及結果是什麼。如果在腳本運行時將其打開，您應該看到爲新圖像發出的請求。

如果您看到請求正在創建，那麼您可以檢查它是否成功，即不是404錯誤或任何類似的錯誤。這在我看來似乎是最可能的問題。如果確實發生了錯誤，你可以查看錯誤類型和被調用的URL - 如果這是錯誤的，它應該給你一個關於如何解決它的大問題。

如果您看不到請求發生，那麼您可以使用Firebug的CSS選項卡來檢查元素的樣式表是否已實際更新。再次，這應該給你一個很好的途徑來調查任何一種方式。

接下來，Firebug的JS選項卡包含一個完整的Javascript調試器，它允許您將斷點放入代碼並逐行執行。

如果所有失敗，發佈一個鏈接到您的網頁版本不起作用，我會看看我是否可以從那裏工作。

[編輯]最後發現：

$("body.custom").css({background: "url('/wp-content/themes/thesis_18/custom/images/strawhat.jpg') repeat;"}); 

在上面的行中，問題是，分號不樣式表字符串內所需的字repeat之後。它應該是：

$("body.custom").css({background: "url('/wp-content/themes/thesis_18/custom/images/strawhat.jpg') repeat"}); 

heh。容易錯過的人。

我終於找到了這個代碼，將上面的代碼粘貼到Firebug的控制檯中，並嘗試了不同的東西，直到它工作。 :-)