javascript - 在 wordpress 中执行 javascript

Question

我正在尝试在我的 wordpress 网站上执行单个 JavaScript 函数。这个想法是当有人将鼠标悬停在链接 (nav .home a) 上时，使图像出现在视口(viewport) div 中。我一辈子都无法让它发挥作用。

这是 HTML: 我把它放在样式表和元标记之间的标题中

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

然后我在视口(viewport) 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 文件。

这可能会解决你的问题，我遇到过几次