2017-01-09 102 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中加載它? –