Блог

Главная - Вопросы по программированию - circlebar.js: 11 Неперехваченная ошибка типа: $(…).найти (…).circle не является функцией

circlebar.js: 11 Неперехваченная ошибка типа: $(…).найти (…).circle не является функцией

#jquery #html #css #css-shapes

#jquery #HTML #css #css-фигуры

Вопрос:

Я пытаюсь создать круговую панель с помощью jQuery, но в консоли отображается одна ошибка, которую невозможно решить. Поискал в Google, но ничего не произошло. Кто-нибудь знает, как я могу исправить эту ошибку? Правильно, что из-за этого код не может выполняться по фрагменту. Поэтому, пожалуйста, не отклоняйте это, это часть этой проблемы. 

 $(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 amp;amp; !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>

Ответ №1:

Похоже, вам просто нужно включить файлы jquery и circles progress js через ваш html — т.е.

 <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>

Смотрите пример ниже:

 $(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 amp;amp; !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>