为什么有些定制的javascript文件可以工作,而有些文件不能

时间:2015-01-08 作者:user1337

我在wordpress页面中添加了一些自定义javascript文件。

我把它们放在函数中。php如下所示:

  wp_register_script(\'formfunctions\', get_template_directory_uri() . \'/js/formfunctions.js\', array( \'jquery\' ));
  wp_enqueue_script( \'formfunctions\' );
  wp_register_script(\'java1\', get_template_directory_uri() . \'/js/java1.js\', array( \'jquery\' ));
  wp_enqueue_script( \'java1\' );
所以某种程度上形成了函数。js工作正常,但java1。js不是。JS文件中没有错误,它们都在(非wordpress)示例页面上工作。chrome inspector告诉我这两个文件都是由浏览器加载的,有人知道为什么是java1吗。js不工作?

以下是这些文件的内容:

formfunctions。js公司

function yesChange(){
  jQuery("#urlh1").show();
  jQuery("#url").show();
}

function noChange(){
  jQuery("#urlh1").hide();
  jQuery("#url").hide();
}

function joyes(divname){
    jQuery(divname).hide();
}

function jono(divname){
  jQuery(divname).show();
}
和java1。js公司:

var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches

jQuery(".next").click(function(){
if(animating) return false;
animating = true;

current_fs = jQuery(this).parent().parent();
next_fs = jQuery(this).parent().parent().next();

//activate next step on progressbar using the index of next_fs
jQuery("#progressbar li").eq(jQuery("fieldset").index(next_fs)).addClass("active");

//show the next fieldset
next_fs.show(); 
//hide the current fieldset with style
current_fs.animate({opacity: 0}, {
    step: function(now, mx) {
        //as the opacity of current_fs reduces to 0 - stored in "now"
        //1. scale current_fs down to 80%
        scale = 1 - (1 - now) * 0.2;
        //2. bring next_fs from the right(50%)
        left = (now * 50)+"%";
        //3. increase opacity of next_fs to 1 as it moves in
        opacity = 1 - now;
        current_fs.css({\'transform\': \'scale(\'+scale+\')\'});
        next_fs.css({\'left\': left, \'opacity\': opacity});
    }, 
    duration: 800, 
    complete: function(){
        current_fs.hide();
        animating = false;
    }, 
    //this comes from the custom easing plugin
    easing: \'easeInOutBack\'
});
});

jQuery(".previous").click(function(){
if(animating) return false;
animating = true;

current_fs = jQuery(this).parent().parent();
previous_fs = jQuery(this).parent().parent().prev();

//de-activate current step on progressbar
jQuery("#progressbar li").eq(jQuery("fieldset").index(current_fs)).removeClass("active");

//show the previous fieldset
previous_fs.show(); 
//hide the current fieldset with style
current_fs.animate({opacity: 0}, {
    step: function(now, mx) {
        //as the opacity of current_fs reduces to 0 - stored in "now"
        //1. scale previous_fs from 80% to 100%
        scale = 0.8 + (1 - now) * 0.2;
        //2. take current_fs to the right(50%) - from 0%
        left = ((1-now) * 50)+"%";
        //3. increase opacity of previous_fs to 1 as it moves in
        opacity = 1 - now;
        current_fs.css({\'left\': left});
        previous_fs.css({\'transform\': \'scale(\'+scale+\')\', \'opacity\': opacity});
    }, 
    duration: 800, 
    complete: function(){
        current_fs.hide();
        animating = false;
    }, 
    //this comes from the custom easing plugin
    easing: \'easeInOutBack\'
});
});

jQuery(".submit").click(function(){
return false;
})

1 个回复
最合适的回答,由SO网友:cybmeta 整理而成

如果如您所保证的那样,javascript文件已正确加载,那么WordPress不太可能与您的问题有关。

也就是说,如果正如您所确保的那样,代码是正确的,并且没有错误,那么我认为问题可能与DOM未就绪有关。来自java1的代码。js代码依赖于DOM,所以在尝试执行DOM之前,必须确保DOM已经就绪。其中一种更简单且流行的方法是将代码封装在jQuery(document).ready 方法:

(function($){

    // $ is locally scoped, so you can use it safely
    // Your code that don\'t depends on DOM can go here

    $(document).ready(function(){

         // Your code that depends on DOM goes here

    });
})(jQuery);

结束

相关推荐

将jQuery日期选择器添加到自定义发布类型Metabox

我已经创建了一个自定义的post类型元数据库,它可以很好地显示和运行。问题在于日期选择器似乎不起作用,当单击元框时,您可以输入它,而不是出现日期选择器。另一方面,我的脚本似乎都无法工作,尽管它们都已加载。编写加载所有脚本的代码。//Making jQuery Google API function modify_jquery() { if (!is_admin()) { // comment out the next two lines to load th