Выполнение javascript в wordpress

Question

Я пытаюсь выполнить одну функцию JavaScript на моем сайте wordpress. Идея заключается в том, чтобы изображение отображалось в div окна просмотра, когда кто-то переводил мышью по ссылке (nav .home a). Я не могу заставить это работать на всю жизнь.

Вот HTML: Я поместил это в моей голове заголовка между таблицей стилей и мета-теги

<script type="text/javascript" src="/scriptfile.js"></script> 

Тогда я побежал скрипт в окне просмотра DIV:

<div class="viewport"> 
<script type="text/javascript"> 
<!-- 
preview(); 
//--></script> 
</div> 

здесь файл (scriptfile.js):

function preview() 
{ 
    var hoverhome = 'url("images/Screen2.png") no-repeat'; 
    var empty = ''; 

    $(document).ready(function() 
    { 

//home 
$('nav .home a').mouseover(function(){ 
     $('.viewport').css('background-image', 'url(' + hoverhome + ')'); 
}); 
$('nav .home a').onmouseout(function(){ 
    $('.viewport').css('background-image', 'url(' + empty + ')'); 
}); 
    } 
} 

Answer 1

Я не уверен, если вы можете позвонить

$(document).ready(function() { } 

ПОСЛЕ того, как страница уже загружена. Попробуйте смешивания вашего кода немного:

$(document).ready(function() 
{ 
     var hoverhome = 'url("images/Screen2.png") no-repeat'; 
     var empty = ''; 

     //home 
     $('nav .home a').mouseover(function() 
     { 
      $('.viewport').css('background-image', 'url(' + hoverhome + ')'); 
     }); 
     $('nav .home a').onmouseout(function() 
     { 
      $('.viewport').css('background-image', 'url(' + empty + ')'); 
     }); 

} 

Я не думаю, что вам нужно поставить функцию там до тех пор, как существует .nav при загрузке страницы. Вы можете полностью удалить это.

Я думаю, проблема в том, что jQuery устанавливает все, когда загружается страница, поэтому вызов метода .ready() ПОСЛЕДОВАТЕЛЬНОСТИ не имеет никакого эффекта.

Answer 2

Первичный вопрос: Это не выглядит так, как будто вы пытаетесь сохранить этот «URL (URL (» изображения/Screen2.png «) нет повтора)» в CSS ваших элементов. Попробуйте делаешь это:

$('.viewport').css('background-image', hoverhome); 

Незначительные вопрос: быть ясно, что вы не должны использовать относительный путь в теме в WordPress! Используйте эту функцию PHP, чтобы получить корень темы:

get_theme_root(); 

и оттуда перейдите к файлу JavaScript.

Это может решить проблему, это произошло несколько раз мне