我的自定義Javascript代碼如何在我的Wordpress網站的一頁上而不在其他頁面上起作用？

Question

當前設置

我正在使用Wordpress創建一個玩偶藝術家網站，並且為每個玩偶創建了一個自定義.php模板。 例如，對於Cher娃娃，我創建了cher.php 。 然后在wp admin中，我創建了一個名為cher的頁面，並在Page Attributes> Template中選擇cher作為模板。 因此，當我轉到http://mitemiu.com/cher頁面時，將加載cher娃娃模板cher.php 。 該頁面工作正常。

cher.php首先通過get_header();調用header.php get_header(); 功能。 在header.php函數中，我鏈接到jquery-1.5.min.js ， jquery.galleriffic.js和mitemiu.js 。

Gallerific 2.0是一個基於jQuery的圖庫插件， mitemiu.js是我的自定義Javascript文件，其中包含：

1. Gallerific自定義設置（圖像過渡速度，要加載的UI組件等）
2. 自定義函數toggleSlider()用於顯示/隱藏玩偶選擇菜單
3. 單擊包含標題doll a元素時要運行toggleSlider()語句

---

相關文件 （ jquery-1.5.min.js ， jquery.galleriffic.js仍然是純凈的，對我jquery.galleriffic.js是不變的）

• mitemiu.js代碼http://pastebin.com/sBZg7vA2
• header.php http://pastebin.com/5ybzxBbM
• cher.php http://pastebin.com/tBE7f8YZ

---

問題

當您訪問http://mitemiu.com/cher時 ，頁面將加載並正常運行。 單擊頂部導航欄中的玩偶鏈接時， #doll-menu toggleSlider() #doll-menu DIV將通過toggleSlider()函數向下滑動/淡入。 再次單擊它， #doll-menu DIV淡出/向上滑動。

一切都很好，但是當您說網站上的任何其他頁面（博客，訂單，關於，聯系方式） ，然后嘗試單擊娃娃鏈接BOOM時！ 沒用

娃娃鏈接為什么只在所有娃娃頁面上起作用而在其他頁面上不起作用？
是否發生某種JS沖突？

Answer 1

所有其他鏈接的href屬性都是正確的。 但是，洋娃娃頁面的href屬性是“＃”，它僅重定向到頁面頂部。

因此，在所有洋娃娃頁面上，這似乎都是正確的，因為它到達了洋娃娃頁面的頂部。 但是在所有其他頁面上，它只是達到了最高點。 在其他頁面上，只需修復玩偶鏈接的href屬性。

Answer 2

它在其他頁面上不起作用，因為在您的mitemiu.js ，第一個函數假定存在div id thumbs ，而在娃娃頁面之外不存在div id thumbs ：

jQuery(document).ready(function($) {
    var gallery = $('#thumbs').galleriffic({ ...

它找不到ID為“ thumbs ”的div，並且未加載其余的JS。 如果您從其他頁面中刪除此頂級功能，則效果很好： http : //jsfiddle.net/FdqxS/

或者，如果您不想使用單獨的JS文件，請使用以下命令檢查div：

if($('#thumbs').length > 0