在wordpress中执行javascript

Question

我正在尝试在我的 wordpress 网站上执行一个 JavaScript 函数。这个想法是当有人将鼠标悬停在链接（nav .home a）上时，使图像出现在视口 div 中。我不能让它为我的生活工作。

这是 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

主要问题： 看起来好像您正在尝试将此“url（url（”images/Screen2.png“）no-repeat）”存储在元素的css中。尝试这样做：

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

小问题： 请注意，您不应该在 wordpress 的主题中使用相对路径！ 使用这个 php 函数来获取主题根目录：

get_theme_root();

然后从那里导航到您的 javascript 文件。

这可能会解决你的问题，它发生在我身上好几次

Answer 2

我不确定你是否可以打电话

$(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 在页面加载时设置了所有内容，因此在 AFTERWARDS 之后调用 .ready() 方法没有任何效果。