percircleはパーセンテージ値を動的に更新しません

Question

円は進捗バーの色を更新しますが、パーセント値は更新しません。 （もちろん、バーの割合）percircleの値を更新したい - 私は、（すなわち、ボタンのクリック、特定のイベントの後に）なり

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

：たとえば、同じように私のhtmlを設定しました。

しかし、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ファイルを変更して、以下の解決策も確認してください。私のフォークから新しい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で固定されているので、[OK]を偉大