circlebar.js: 11 Uncaught TypeError: $ (...). Find (...). Circle ist keine Funktion

Question

Ich versuche eine Kreisleiste mit jQuery zu erstellen, aber es gibt einen Fehler in der Konsole , die nicht gelöst werden können. Habe gegoogelt, aber nichts ist passiert. Weiß jemand wie ich diesen Fehler beheben kann? Es ist richtig, dass der Code deswegen nicht durch Schnipsel laufen kann. Also bitte nicht ablehnen, es ist Teil dieses Problems.

$(document).ready(function ($) { 
 
    function animateElements() { 
 
     $('.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) { 
 
       $(this).data('animate', true); 
 
       $(this).find('.circle').circleProgress({ 
 
        startAngle: -Math.PI/2, 
 
        value: percentage, 
 
        thickness: 8, 
 
        fill: { 
 
         color: '#1B58B8' 
 
        } 
 
       }).on('circle-animation-progress', function (event, progress, stepValue) { 
 
        $(this).find('div').text(String(stepValue.toFixed(2)).substr(2) + '%'); 
 
       }).stop(); 
 
      } 
 
     }); 
 
    } 
 

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

.progressbar { 
 
    display: inline-block; 
 
    width: 100px; 
 
    margin: 25px; 
 
} 
 
.circle { 
 
    width: 100%; 
 
    margin: 0 auto; 
 
    margin-top: 10px; 
 
    display: inline-block; 
 
    position: relative; 
 
    text-align: center; 
 
} 
 
.circle canvas { 
 
    vertical-align: middle; 
 
} 
 
.circle div { 
 
    position: absolute; 
 
    top: 30px; 
 
    left: 0; 
 
    width: 100%; 
 
    text-align: center; 
 
    line-height: 40px; 
 
    font-size: 20px; 
 
} 
 
.circle strong i { 
 
    font-style: normal; 
 
    font-size: 0.6em; 
 
    font-weight: normal; 
 
} 
 
.circle span { 
 
    display: block; 
 
    color: #aaa; 
 
    margin-top: 12px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div style="width:100%;height:500px;"></div> 
 

 
<h3>Sed scelerisque</h3> 
 

 
<div class="progressbar" data-animate="false"> 
 
    <div class="circle" data-percent="98"> 
 
     <div></div> 
 
     <p>Quisque's</p> 
 
    </div> 
 
</div> 
 
<div class="progressbar" data-animate="false"> 
 
    <div class="circle" data-percent="30"> 
 
     <div></div> 
 
     <p>Maecenas</p> 
 
    </div> 
 
</div> 
 
<div class="progressbar" data-animate="false"> 
 
    <div class="circle" data-percent="77"> 
 
     <div></div> 
 
     <p>Pellentesque</p> 
 
    </div> 
 
</div> 
 
<div class="progressbar" data-animate="false"> 
 
    <div class="circle" data-percent="49"> 
 
     <div></div> 
 
     <p>Etiam sodales</p> 
 
    </div> 
 
</div> 
 
<div style="width:100%;height:500px;"></div>

Answer 1

Es scheint, dass Sie nur die jQuery und Kreis Fortschritt js Dateien über Ihre HTML umfassen müssen - also

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://cdn.rawgit.com/kottenator/jquery-circle-progress/1.2.0/dist/circle-progress.js"></script> 

Siehe Beispiel unten:

$(document).ready(function ($) { 
 
    function animateElements() { 
 
     $('.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) { 
 
       $(this).data('animate', true); 
 
       $(this).find('.circle').circleProgress({ 
 
        startAngle: -Math.PI/2, 
 
        value: percentage, 
 
        thickness: 8, 
 
        fill: { 
 
         color: '#1B58B8' 
 
        } 
 
       }).on('circle-animation-progress', function (event, progress, stepValue) { 
 
        $(this).find('div').text(String(stepValue.toFixed(2)).substr(2) + '%'); 
 
       }).stop(); 
 
      } 
 
     }); 
 
    } 
 

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

.progressbar { 
 
    display: inline-block; 
 
    width: 100px; 
 
    margin: 25px; 
 
} 
 
.circle { 
 
    width: 100%; 
 
    margin: 0 auto; 
 
    margin-top: 10px; 
 
    display: inline-block; 
 
    position: relative; 
 
    text-align: center; 
 
} 
 
.circle canvas { 
 
    vertical-align: middle; 
 
} 
 
.circle div { 
 
    position: absolute; 
 
    top: 30px; 
 
    left: 0; 
 
    width: 100%; 
 
    text-align: center; 
 
    line-height: 40px; 
 
    font-size: 20px; 
 
} 
 
.circle strong i { 
 
    font-style: normal; 
 
    font-size: 0.6em; 
 
    font-weight: normal; 
 
} 
 
.circle span { 
 
    display: block; 
 
    color: #aaa; 
 
    margin-top: 12px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.rawgit.com/kottenator/jquery-circle-progress/1.2.0/dist/circle-progress.js"></script> 
 
<div style="width:100%;height:500px;"></div> 
 

 
<h3>Sed scelerisque</h3> 
 

 
<div class="progressbar" data-animate="false"> 
 
    <div class="circle" data-percent="98"> 
 
     <div></div> 
 
     <p>Quisque's</p> 
 
    </div> 
 
</div> 
 
<div class="progressbar" data-animate="false"> 
 
    <div class="circle" data-percent="30"> 
 
     <div></div> 
 
     <p>Maecenas</p> 
 
    </div> 
 
</div> 
 
<div class="progressbar" data-animate="false"> 
 
    <div class="circle" data-percent="77"> 
 
     <div></div> 
 
     <p>Pellentesque</p> 
 
    </div> 
 
</div> 
 
<div class="progressbar" data-animate="false"> 
 
    <div class="circle" data-percent="49"> 
 
     <div></div> 
 
     <p>Etiam sodales</p> 
 
    </div> 
 
</div> 
 
<div style="width:100%;height:500px;"></div>