-Не так просто, как в этой скрипке?

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)
        }); 

* ** 1015 1016 * 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;"});

Это заставит его получить правильное изображение.

Надежда, которая помогает объяснить вещи.

[EDIT] Что касается комментария ОП, заявляющего, что он все еще не может заставить его работать:

Предполагая, что все ваши пути правильны, это должно было сработать.Я не могу доказать это или объяснить, почему это не сработало, не увидев фактически нерабочего примера, но я могу дать вам несколько советов о том, как отследить причину проблемы.

Этот советиспользовать Firebug.(или любой другой инструмент разработки, который поставляется с другими браузерами, но Firebug по-прежнему мой любимый).

Firebug - это инструмент отладки на основе браузера, который имеет несколько функций, которые вы можете использоватьчтобы отследить проблему.

Во-первых, у нее есть вкладка «Сеть», которая позволяет вам наблюдать, когда выполняются HTTP-запросы и каковы были результаты.Если у вас это открыто во время работы вашего скрипта, вы должны увидеть запрос на создание нового изображения.

Если вы видите, что запрос сделан, то вы можете проверить, что он выполнен успешно, то есть не ошибка 404 илиничего подобного.Это кажется мне наиболее вероятной проблемой.Если он выдает ошибку, вы можете посмотреть на тип ошибки и URL-адрес, который был вызван - если это не так, это должно дать вам большую подсказку о том, как ее исправить.

Если вы этого не сделаетеесли запрос выполняется, вы можете использовать вкладку CSS Firebug, чтобы убедиться, что таблица стилей для элемента действительно обновлена.Опять же, это должно дать вам хорошие возможности для исследования в любом случае.

Далее, вкладка Firebug JS включает в себя полный отладчик Javascript, который позволяет вам ставить точки останова в коде и построчно проходить по нему.1031 *

Если ничего не получится, опубликуйте ссылку на версию вашей страницы, которая не работает, и я посмотрю, смогу ли я отработать ее оттуда.

[EDIT] Наконец-то найденоit:

$("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"});

Хех.Легко пропустить.

Я нашел это в конце, вставив строку кода выше в консоль Firebug и пробуя разные вещи, пока он не заработал.: -)