自定義Javascript和css添加到Wordpress，但是，仍然不能正常工作

我目前正在開發的網站的內容圍繞古代藏文經文。我的目標是爲用戶提供文本的基本互動翻譯。最重要的是用戶能夠以英語和藏語兩種語言體驗文本。我決定利用簡單的突出顯示方案來展示英文單詞/短語是如何從藏文劇本中衍生出來的，反之亦然。當在一個特定的單詞/詞組上懸停時，突出顯示藏文字母和英語等值。自定義Javascript和css添加到Wordpress，但是，仍然不能正常工作
這是通過添加一個跨度每個詞/短語周圍，通過把每個詞/短語中的其他語言的冠軍屬性連接兩個完成。
對於初學者，我有JSFiddle這個參考JSFiddle Mockup。

我創建highlight.js並用它添加到我的WordPress主題的/資產/ JS文件夾中的以下內容：

$('span[title]').hover(
function() { 
    $(this).addClass('highlight'); 
    $('span:contains("'+$(this).attr('title')+'")').addClass('highlight'); 
}, 
function() { 
    $(this).removeClass('highlight'); 
    $('span:contains("'+$(this).attr('title')+'")').removeClass('highlight'); 
} 
);

我加入了以下內容的Custom.css文件我wordpress主題：

span { 
} 
.highlight { 
    background:yellow; 
}

我加入下面的「mthemes_enqueue_scripts（）」我functions.php文件的功能。

wp_register_script('highlight',  get_template_directory_uri().'/assets/js/highlight.js'); 

wp_enqueue_script('highlight');

這裏是頁面Page with Javascript
的JavaScript功能不能正常使用的鏈接。我已經使用了幾個工具來嘗試驗證css是從我的Custom.css文件中加載的，而且是。使用視圖源我已經能夠確認highlight.js與我的其他JS一起被加載。
任何幫助解決這個問題是非常感謝。我錯過了什麼？

來源

2014-02-10 64H01101001H

試試這個：

jQuery('span[title]').hover(
function() { 
    jQuery(this).addClass('highlight'); 
    jQuery('span:contains("'+jQuery(this).attr('title')+'")').addClass('highlight'); 
}, 
function() { 
    jQuery(this).removeClass('highlight'); 
    jQuery('span:contains("'+jQuery(this).attr('title')+'")').removeClass('highlight'); 
} 
);

來源

2014-02-10 13:41:48 user1627363

我用'jQuery'替換了$的所有實例，並且還移動了jquery.highlight。js to/assets/js/jquery – 64H01101001H

謝謝，感謝您幫助我糾正錯誤！ – 64H01101001H

沒問題，歡迎光臨。 – user1627363

它看起來像你加載jQuery後的自定義js文件。 highlight.js似乎是用jQuery編寫的，所以也許將它加載到頁腳中。

來源

2014-02-10 13:38:07 BarryWalsh

如果你看看http://codex.wordpress.org/Function_Reference/wp_enqueue_script你會看到選擇將文件添加到頁腳而不是標題。 – BarryWalsh

我將$ in_footer參數更改爲'True'** wp_register_script（'highlight'，get_template_directory_uri（）。'/ assets/js/jquery/jquery.highlight.js'，array（），'1.0.0'，true） ; ** – 64H01101001H

謝謝，感謝您幫助我糾正錯誤！ – 64H01101001H

您的網頁提高JavaScript錯誤：「未捕獲的ReferenceError：未定義$」。

在wordpress中，您必須使用'jQuery'而不是'$'來調用jquery函數。所以用highlight.js中的'jQuery'替換'$'的所有實例。

來源

2014-02-10 13:47:04 mmai

謝謝，感謝您幫助我糾正錯誤！ – 64H01101001H

自定義Javascript和css添加到Wordpress，但是，仍然不能正常工作

回答

相關問題