为什么我的自定义 Javascript 代码可以在我的 Wordpress 网站的一页上运行，而在其他页面上却不行？

Question

当前设置

我正在使用 Wordpress 创建一个娃娃艺术家网站，并且我为每个娃娃创建了一个自定义 .php 模板。例如，对于雪儿娃娃，我创建了cher.php。然后在 wp admin 我创建了一个名为 cher 的页面，在 Page Attributes > Template 我选择了 cher 作为模板。因此，当我转到页面 http://mitemiu.com/cher 时，cher 娃娃模板 cher.php 已加载。该页面运行良好。

cher.php 首先通过get_header(); 函数调用header.php。在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 保持纯净，我没有动过）

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

---

问题

当您转到http://mitemiu.com/cher 时，页面加载并正常工作。当您单击顶部导航栏中的 dolls 链接时，#doll-menu DIV 通过toggleSlider() 功能向下滑动/淡入。再次单击它，#doll-menu DIV 会淡出/向上滑动。

一切都很好，但是，当你去说网站上的任何其他页面时（博客、订单、关于、联系），然后尝试点击 娃娃 链接，繁荣！它不起作用。

为什么娃娃链接只在所有娃娃页面上有效，在其他页面上无效？
是否发生了某种 JS 冲突？

Answer 1

所有其他链接的 href 属性都是正确的。但是娃娃页面的href属性是“#”，只是重定向到页面顶部。

所以在所有的玩偶页面上，它似乎都是正确的，因为它进入了玩偶页面的顶部。但在所有其他页面上，它只是转到自身的顶部。在其他页面上，只需修复娃娃链接的 href 属性即可。

Answer 2

它不适用于其他页面，因为在您的 mitemiu.js 中，第一个函数假定存在 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