我的自定义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