在wordpress中執行javascript

我想在我的wordpress網站上執行一個JavaScript函數。這個想法是當有人通過鏈接（nav .home a）將圖像顯示在視口div中時。我無法得到這個爲我的生活工作。在wordpress中執行javascript

下面是HTML：我把這個在我的頭頭樣式和meta標籤之間

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

來源

2013-05-30 Chris

您的$（document）.ready（function（）{...}）;應該在預覽功能之外 –

您不需要JavaScript來更改div的背景圖像。改爲使用純CSS。請參閱'：hover' http://www.w3schools.com/cssref/sel_hover.asp – Justin

我首先想到了這一點，但我改變了懸停時不同元素的CSS。我會把這兩個元素放在同一個類中嗎？ – Chris

我不確定您是否可以撥打

$(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（）方法AFTERWARDS不起作用。

來源

2013-05-30 18:33:08 dKen

所以我試了兩個答案（和兩個組合，無濟於事。我已經改變了我的標題調用：對於JS的2個答案的組合，但仍然沒有顯示出鼠標懸停的任何內容 – Chris

您是否在Javascript控制檯中看到任何錯誤？ – dKen

我得到ReferenceError：預覽未定義 – Chris

的主要問題： 看起來好像你正在嘗試存儲這個「網址（URL（」圖像/ Screen2.png「）不重複）」在你的元素的CSS。嘗試上來的這個：

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

小問題： 明確的是，你不應該在WordPress主題中的使用相對路徑！使用此PHP函數來獲取主題根：

get_theme_root();

，並從那裏瀏覽到您的JavaScript文件。

這可能會解決您的問題，它發生在我身上的幾次

來源

2013-05-30 18:40:00

在wordpress中執行javascript

回答

相關問題