我的自定义Javascript代码如何在我的Wordpress网站的一页上而不在其他页面上起作用？

Question

Current Set Up

I am using Wordpress to create a doll artist site and for each doll I have created a custom .php template. For example, for the Cher doll I have created cher.php . Then in wp admin I have created a page called cher and in Page Attributes > Template I have selected cher as the template. So when I go to the page http://mitemiu.com/cher the cher doll template cher.php is loaded. That page works fine.

The cher.php calls the header.php first via the get_header(); function. In the header.php function I link to jquery-1.5.min.js , jquery.galleriffic.js and mitemiu.js .

Gallerific 2.0 is a jQuery based gallery plug-in and mitemiu.js is my custom Javascript file which contains:

1. Gallerific custom settings (image transition speed, UI components to be loaded, etc)
2. Custom function called toggleSlider() for displaying/hiding of a doll selection menu
3. A statement to run toggleSlider() when the a element containing the title doll is clicked

---

Relevant files ( jquery-1.5.min.js , jquery.galleriffic.js remain pure & untouched by me)

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

---

Problem

When you go to http://mitemiu.com/cher the page loads and works fine. When you click on the dolls link in the top navigation bar the #doll-menu DIV slides down/fades in via the toggleSlider() function. Click it again and the #doll-menu DIV fades out/slides up.

All is fine but, when you go to say any other page on the site (blog, order, about, contact) and then try clicking the doll link, BOOM! It doesn't work.

How come the doll link only works on all doll pages and not on other pages?
Is there some sort of JS conflict occuring?

Answer 1

The href attribute of all the other links are right. However, the href attrubte of the doll page is "#", which just redirects to the top of the page.

So on all the doll pages, it seems right because it goes to the top of the doll page. But on all other pages, it just goes to the top of itself. On the other pages, just fix the href attribute of the doll link.

Answer 2

it is not working on other pages because in your mitemiu.js the first function assumes the existence of div id thumbs which does not exist outside of the dolls page:

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

It is not finding a div with id " thumbs " and the rest of the JS is not being loaded. If you remove this top function from the other pages it works just fine: http://jsfiddle.net/FdqxS/

Or, if you don't want separate JS files, check for the div using:

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