percircle不会动态更新百分比值

Question

圆圈会更新进度条颜色，但不会更新百分比值。例如，设置我的html如：

<div id="bluecircle" data-percent="25" class="big"></div>

然后我会（在特定事件之后 - 即点击按钮）更新percircle的值（当然还有条形码的百分比）。

但是，尝试更新bluecircle的百分比值，如下所示，不起作用：

$("#bluecircle").percircle({
    percent: 95.5,
    progressBarColor: "#3b8e39"
});

即使这段代码也无法提供所需的结果：

 $("#bluecircle").percircle({
     text: "95.5",
     percent: 95.5,
     progressBarColor: "#3b8e39"
 });

这就是它产生的，而不是：

以下是项目本身的示例：https://github.com/toubou91/percircle

Answer 1

请更改您的JS文件，并检查以下解决方案。你也可以从我的fork下载新的js。 https://github.com/shyamshingadiya/percircle

!function(t){"use strict";"function"==typeof define&&define.amd?define(["jquery"],t):"object"==typeof exports&&"object"==typeof module?module.exports=t(require("jquery")):t(jQuery)}(function(t,r){"use strict";t.fn.percircle=function(r){var s={animate:!0};r||(r={}),t.extend(r,s);var o=3.6;return this.each(function(){var s=t(this),n="",d=function(t,r){s.on("mouseover",function(){t.children("span").css("color",r)}),s.on("mouseleave",function(){t.children("span").attr("style","")})};s.hasClass("percircle")||s.addClass("percircle"),"undefined"!=typeof s.attr("data-animate")&&(r.animate="true"==s.attr("data-animate")),r.animate&&s.addClass("animate"),"undefined"!=typeof s.attr("data-progressBarColor")?(r.progressBarColor=s.attr("data-progressBarColor"),n="style='border-color: "+r.progressBarColor+"'",d(t(this),r.progressBarColor)):"undefined"!=typeof r.progressBarColor&&(n="style='border-color: "+r.progressBarColor+"'",d(t(this),r.progressBarColor));var i=s.attr("data-percent")||r.percent||0,c=s.attr("data-perclock")||r.perclock||0,l=s.attr("data-perdown")||r.perdown||0;if(i){i>50&&s.addClass("gt50");var f=s.attr("data-text")||r.text||i+"%";s.html("<span>"+f+"</span>"),t('<div class="slice"><div class="bar" '+n+'></div><div class="fill" '+n+"></div></div>").appendTo(s),i>50&&t(".bar",s).css({"-webkit-transform":"rotate(180deg)","-moz-transform":"rotate(180deg)","-ms-transform":"rotate(180deg)","-o-transform":"rotate(180deg)",transform:"rotate(180deg)"});var m=o*i;setTimeout(function(){t(".bar",s).css({"-webkit-transform":"rotate("+m+"deg)","-moz-transform":"rotate("+m+"deg)","-ms-transform":"rotate("+m+"deg)","-o-transform":"rotate("+m+"deg)",transform:"rotate("+m+"deg)"})},0)}else c?(s.hasClass("perclock")||s.addClass("perclock"),setInterval(function(){var r=new Date,e=a(r.getHours())+":"+a(r.getMinutes())+":"+a(r.getSeconds());s.html("<span>"+e+"</span>"),t('<div class="slice"><div class="bar" '+n+'></div><div class="fill" '+n+"></div></div>").appendTo(s);var o=r.getSeconds();0===o&&s.removeClass("gt50"),o>30&&(s.addClass("gt50"),t(".bar",s).css({"-webkit-transform":"rotate(180deg);scale(1,3)","-moz-transform":"rotate(180deg);scale(1,3)","-ms-transform":"rotate(180deg);scale(1,3)","-o-transform":"rotate(180deg);scale(1,3)",transform:"rotate(180deg);scale(1,3)"}));var d=6*o;t(".bar",s).css({"-webkit-transform":"rotate("+d+"deg)","-moz-transform":"rotate("+d+"deg)","-ms-transform":"rotate("+d+"deg)","-o-transform":"rotate("+d+"deg)",transform:"rotate("+d+"deg)"})},1e3)):l&&e(s,r,n)})};var e=function(r,e,a){function s(){return c-=1,c>30&&r.addClass("gt50"),30>c&&r.removeClass("gt50"),i(),0>=c?(n(),void r.html("<span>"+l+"</span>")):void 0}function o(){m=setInterval(s,1e3)}function n(){clearInterval(m)}function d(){n(),c=e.secs,i(),o()}function i(){r.html("<span>"+c+"</span>"),t('<div class="slice"><div class="bar" '+a+'></div><div class="fill" '+a+"></div></div>").appendTo(r);var e=6*c;t(".bar",r).css({"-webkit-transform":"rotate("+e+"deg)","-moz-transform":"rotate("+e+"deg)","-ms-transform":"rotate("+e+"deg)","-o-transform":"rotate("+e+"deg)",transform:"rotate("+e+"deg)"})}var c=r.attr("data-secs")||e.secs,l=r.attr("data-timeUpText")||e.timeUpText,f=r[0].hasAttribute("data-reset")||e.reset;l.length>8&&(l="the end");var m;f&&r.on("click",d),o()},a=function(t){return 10>t?"0"+t:t}});


$(document).ready(function(){
    $("#bluecircle").percircle({percent: 25,text: "25"});
    $('#changeCircle').click(function(e){
        e.preventDefault();
        changeCircle();
    });
});

function changeCircle(){
    $("#bluecircle").percircle({text:''});
    $("#bluecircle").percircle({
         text: "",
         percent: 95.5,
         progressBarColor: "#3b8e39"
    });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://toubou91.github.io/percircle/dist/css/percircle.css" rel="stylesheet"/>
<a href="javascript:void(0);" id="changeCircle">Fill Circle to 95.5</a><br><br>
<div id="bluecircle" class="big"></div>

如果不起作用，请告诉我。

Answer 2

首先，非常感谢您使用percircle！

现在已经使用v1.0.24修复了这个问题，因此，请随意update本地的percircle实例： - ）