-이 피들처럼 간단하지 않습니까?

Question

여기에 바이올렛 http://jsfiddle.net/mjmitche/KvwGw/21/ 양식을 전송하면 새 양식이 나타나고 배경색도 변경됩니다.

WordPress의 블로그에서 양식을 제출할 때 배경 이미지를 변경하려고합니다. 이미지가 여기에 서버

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

에 업로드 한 후이 내 어리 석음에서 너무

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

처럼 (내 사용자 정의 워드 프레스 테마) CSS를 사용하여 표시되는, 나는 처음에 배경 이미지 변화를 만들려고 아래 코드를 성공적으로 사용하지 못했지만 백그라운드 이미지가 서버에 업로드 되었기 때문에 제출시 배경 이미지를 변경해야하는 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'을 이미지 URL로 지정하면 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;"}); 

오른쪽 이미지를 얻을 수 있습니다.

희망을 설명하는 데 도움이되는 호프입니다. 그는 여전히 동작하지 않습니다 알리는 영업 이익으로 주석에 관하여

[편집] :

모든 경로가 올바른지 가정은,이 일을해야합니다. 내가 실제로 작동하지 않는 예제를 보지 않고 작동하지 않는 이유를 증명하거나 설명 할 수는 없지만 문제의 원인을 추적하는 방법에 대한 조언을 드릴 수는 있습니다.

그 조언은 방화범을 사용하는 것입니다. (또는 다른 브라우저와 함께 제공되는 다른 개발 도구 중 하나이지만 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의 콘솔에 붙여 놓고 작동 할 때까지 다른 것을 시도해 보았습니다. :-)