我要在wordpress模板页面中包含的javascript出现问题。

我正在尝试做的是:
在此页面上-http://www.pcworld.ro/vworker/-我想调用一个将淡入/淡出6张图像的JavaScript(您可以在标题的右上角看到第一张图像)。

这是脚本:http://www.pcworld.ro/vworker/wp-content/themes/visualtime/js/innerfade.js

这是我在header.php中拥有的内容:

<?php wp_enqueue_script('innerfade', '/vworker/wp-content/themes/visualtime/js/innerfade.js', array('jquery'));?>
<?php wp_head();?>
<script type="text/javascript">
$(document).ready(
function(){
$('ul#screenshots').innerfade({
speed: 1000,
timeout: 4000,
type: 'random',
containerheight: '259px'
});
});
</script>


这是我在functions.php中拥有的:

<?php
function load_scripts() {
   wp_enqueue_script('jquery');
   wp_enqueue_script('innerfade', '/wp-content/themes/visualtime/js/innerfade.js', array('jquery'));
}
add_action('init', 'load_scripts');
?>


这是应该负责homepage.php(我需要javascript才能工作的wordpress模板页面)中的javascript的代码:

<div id="screenshot" style="overflow:hidden;">
            <ul class="innerfade" id="screenshots" style="list-style: none outside none; margin: 0pt; padding: 0pt; cursor: pointer; position: relative; height: 259px;" onclick="location.href='#'">
                <li style="z-index: 6; position: absolute; display: none;">
                    <img src="/vworker/wp-content/themes/visualtime/images/productscreenshot1.jpg" alt="Room Booking System">
                </li>
                <li style="z-index: 5; position: absolute; display: none;">
                    <img src="/vworker/wp-content/themes/visualtime/images/productscreenshot2.jpg" alt="Complete Administration Panel">
                </li>
                <li style="z-index: 4; position: absolute; display: none;">
                    <img src="/vworker/wp-content/themes/visualtime/images/productscreenshot3.jpg" alt="Meeting Room Bookings">
                </li>
                <li style="z-index: 3; position: absolute; display: none;">
                    <img src="/vworker/wp-content/themes/visualtime/images/productscreenshot4.jpg" alt="View Statistics of All Room Bookings">
                </li>
                <li style="z-index: 2; position: absolute; display: none;">
                    <img src="/vworker/wp-content/themes/visualtime/images/productscreenshot5.jpg" alt="Including a Helpdesk System">
                </li>
                <li style="z-index: 1; position: absolute; display: list-item;">
                    <img src="/vworker/wp-content/themes/visualtime/images/productscreenshot6.jpg" alt="Intelligent Recurring Bookings">
                </li>
            </ul>
</div>


当涉及到wordpress时,我是一个初学者;涉及到javascript时,我是一个绝对的菜鸟。您能否解释一下我在做什么错并予以解决?

最佳答案

这在wordpress主题开发人员中很常见,他们会在jquery文件中自动包含jQuery.noConflict()以避免与其他库冲突。
http://docs.jquery.com/Using_jQuery_with_Other_Libraries

几种选择:

从jquery文件底部删除jQuery.noConflict();
-要么-
将所有代码中的$替换为文本jQuery。您使用的插件文件应该绝缘并且可以

-要么-

更改

$(document).ready(
function(){
   //.........
}




jQuery(document).ready(
function($){
   //.........
}


使用$作为参数,您可以在其中使用$

09-17 18:17
查看更多