2017-01-09 64 views
0

我正在一个网站上工作,我需要包括圆形进度条,因为我使用了“circle-progress.js”。如果我运行在正常的HTML网站,它工作正常,但是当我使用WordPress它不工作,并给予了以下错误:jQuery(...)。find(...)。circleProgress不是函数

function mycounter(){ 
    wp_enqueue_script('counter', get_template_directory_uri() . '/circle-progress.js', array('jquery'), '1.0.0', true); 
} 
add_action('wp_enqueue_scripts', 'mycounter'); 


jQuery(document).ready(function ($) { 
    function animateElements() { 
     jQuery('.progressbar').each(function() { 
      var elementPos = $(this).offset().top; 
      var topOfWindow = $(window).scrollTop(); 
      var percent = $(this).find('.circle').attr('data-percent'); 
      var percentage = parseInt(percent, 10)/parseInt(100, 10); 
      var animate = $(this).data('animate'); 
      if (elementPos < topOfWindow + $(window).height() - 30 && !animate) { 
       jQuery(this).data('animate', true); 
       jQuery(this).find('.circle').circleProgress({ 
        startAngle: -Math.PI/2, 
        value: percent/100, 
        thickness: 14, 
        fill: { 
         color: '#43C6DB' 
        } 
       }).on('circle-animation-progress', function (event, progress, stepValue) { 
        jQuery(this).find('div').text((stepValue * 100).toFixed()+ "+"); 
       }).stop(); 
      } 
     }); 
    } 

    // Show animated elements 
    animateElements(); 
    jQuery(window).scroll(animateElements); 
}); 

jQuery(...).find(...).circleProgress is not a function

<?php 
function my_theme_enqueue_styles() { 

    $parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme. 

    wp_enqueue_style($parent_style, get_template_directory_uri() . '/style.css'); 
    wp_enqueue_style($parent_style, get_template_directory_uri() . '/inc/css/style.css'); 
    wp_enqueue_style($parent_style, get_template_directory_uri() . '/inc/css/style.css', false, 1.0, 'all'); 
    wp_enqueue_style('child-style', 
     get_stylesheet_directory_uri() . '/style2.css', 
     array($parent_style), 
     wp_get_theme()->get('Version') 
    ); 
} 
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles'); 

function theme_load_scripts() { 
    wp_enqueue_style('style2', get_stylesheet_directory_uri() . '/style2.css', false, 1.0, 'all'); 
    wp_enqueue_style('main', get_stylesheet_directory_uri() . '/main.css', false, 1.0, 'all'); 
    wp_enqueue_style('align', get_stylesheet_directory_uri() . '/align.css', false, 1.0, 'all'); 
    wp_enqueue_style('styletime', get_stylesheet_directory_uri() . '/styletime.css', false, 1.0, 'all'); 
    wp_enqueue_script('modernizrtime', get_stylesheet_directory_uri() . '/modernizrtime.js', array('jquery'), 1.0, true); 
    wp_enqueue_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js', false); 
    wp_enqueue_script('main', get_stylesheet_directory_uri() . '/main.js', array('jquery'), 1.0, true); 
} 

add_action('wp_enqueue_scripts', 'theme_load_scripts'); 

function parent_css() { 

    wp_enqueue_style('parent_style', get_stylesheet_directory_uri() . '/template.css', false, 1.0, 'all'); 
    wp_enqueue_style('oldtemplate_style', get_stylesheet_directory_uri() . '/angular-material.css', false, 1.0, 'all'); 
    wp_enqueue_script('bootstrap', get_stylesheet_directory_uri() . '/bootstrap.js', array('jquery'), 1.0, true); 
    wp_enqueue_script('camera', get_stylesheet_directory_uri() . '/camera.js', array('jquery'), 1.0, true); 
    wp_enqueue_script('jquery.easing.1.3', get_stylesheet_directory_uri() . '/jquery.easing.1.3.js', array('jquery'), 1.0, true); 
    wp_enqueue_script('jquery.mobile.customized.min', get_stylesheet_directory_uri() . '/jquery.mobile.customized.min.js', array('jquery'), 1.0, true); 
    wp_enqueue_script('jquery.sticky', get_stylesheet_directory_uri() . '/jquery.sticky.js', array('jquery'), 1.0, true); 
    wp_enqueue_script('media-uploader', get_stylesheet_directory_uri() . '/media-uploader.js', array('jquery'), 1.0, true); 
    wp_enqueue_script('options-custom', get_stylesheet_directory_uri() . '/options-custom.js', array('jquery'), 1.0, true); 
    wp_enqueue_script('uslider.min', get_stylesheet_directory_uri() . '/uslider.min.js', array('jquery'), 1.0, true); 
    wp_enqueue_script('wow', get_stylesheet_directory_uri() . '/wow.js', array('jquery'), 1.0, true); 
    wp_enqueue_script('wow.min', get_stylesheet_directory_uri() . '/wow.min.js', array('jquery'), 1.0, true); 
    wp_enqueue_script('custom-header', get_stylesheet_directory_uri() . '/custom-header.js', array('jquery'), 1.0, true); 
    wp_enqueue_script('customizer', get_stylesheet_directory_uri() . '/customizer.js', array('jquery'), 1.0, true); 
    wp_enqueue_script('extras', get_stylesheet_directory_uri() . '/extras.js', array('jquery'), 1.0, true 




    ); 
    wp_enqueue_script('jetpack', get_stylesheet_directory_uri() . '/jetpack.js', array('jquery'), 1.0, true); 
    wp_enqueue_script('options-framework', get_stylesheet_directory_uri() . '/options-framework.js', array('jquery'), 1.0, true); 
    wp_enqueue_script('template-tags', get_stylesheet_directory_uri() . '/template-tags.js', array('jquery'), 1.0, true); 
    wp_enqueue_script('customizer', get_stylesheet_directory_uri() . '/customizer.js', array('jquery'), 1.0, true); 
    wp_enqueue_script('navigation', get_stylesheet_directory_uri() . '/navigation.js', array('jquery'), 1.0, true); 
    wp_enqueue_script('skip-link-focus-fix', get_stylesheet_directory_uri() . '/skip-link-focus-fix.js', array('jquery'), 1.0, true); 



} 
add_action('wp_enqueue_scripts', 'parent_css'); 

function mycounter(){ 

    wp_enqueue_script('counter', get_template_directory_uri() . '/circle-progress.js', array('jquery'), '1.0.0', true); 
} 
add_action('wp_enqueue_scripts', 'mycounter'); 
require_once dirname(__FILE__) . '/avenue-child.php'; 
?> 

我写错误的语法,请帮助?

+2

我觉得你正在''circle-progress'库之后加载'jQuery',这可能会导致这个错误。确保你在你的'circle-progress'库加入之前加载'jQuery' –

+0

我最好的猜测是,你正在将文件'circle-progress.js'加载到'DOM'之前运行。 –

+0

我没有得到您。 :(我正在写这个代码在functions.php文件中 –

回答

0

在circle-progress导致错误之后加载jQuery脚本。

+0

我是新的到wordpress.i编写函数mycounter()在function.php文件和其他jquery函数在header.php.am我做错了吗? –

+0

只是检查jQuery的顺序与查看源的帮助 – Arun

+0

是circle-progess.js是在jquery函数之后加载。我怎样才能在wordpress中加载它? –