Question

我目前正在尝试通过Monochromer制作Circle Diagram Jquery，以响应页面上的事件/更改。也就是说，如果我更改表单字段百分比，则图表会更新。

http://www.jqueryscript.net/demo/Customizable-Circular-Progress-Bar-with-jQuery-CSS3-Circle-Diagram/

我在这里做了一个小提琴： http://jsfiddle.net/brandrally/x3ag25q2/

我不确定我的代码中是否遗漏了某些内容，或者我的基本逻辑是否存在缺陷，无论我调整什么，我似乎都无法使其正常工作。

初始图表设置JS：

window.onload=function(){
$(function() {
$('#diagram').diagram({ 
size: "200",
});
})

$(document).ready(function() {      
$("input[name$='percentages']").click(function() {
var req = $(this).val();

$('#displayresult').html(+ req);    
$('#diagram').attr('data-percent','+ req');


});
});

HTML

<!-- The Diagram -->
<div id="diagram" class="diagram" data-percent="30.00"></div>
<!-- The Form Field -->
<label><input name="percentages" id="percentages" type="radio" value="20.00" >20%</label>
<label><input name="percentages" id="percentages" type="radio" value="40.00" >40%</label>

Answer 1

在这里：http://jsfiddle.net/t6c0txqo/9/

$(function() {
   $('#diagram').diagram({ size: "200"});

   $("input[name='percentages']").change(function() {
        var req = $(this).val();
        //$('#displayresult').html(req);    
        $('#diagram').data('percent', req).empty(); // plugin uses 'data' - it's not the same as 'attr' in jQuery
        $('#diagram').diagram({ size: "200"});

    });
});

除了您的代码中的一些错误（跟踪无线电上的ID;）），重要的是插件使用＆＃39;数据＆＃39; ：它不仅仅是 $（）。attr（＆＃34; data-something＆＃34;）的别名，而是 data-something 的当前状态，当您更新属性本身时，它不会发生变化。

此插件非常简单 - 它只是一次拍摄＆＃34;，因此您需要删除其结果并在更改值后再次启动它。

Answer 2

看起来您正在更新属性，但是您没有触发任何事件来使用更新后的值刷新您的圆圈。这个API应该有“刷新”选项:)。或者，您可以再次将此API重新附加到该元素。

更新了

$(function() {
$('#diagram').diagram({ 
size: "200",
});
})

$(document).ready(function() {      
$("input[name$='percentages']").click(function() {
var req = $(this).val();

$('#displayresult').html(req);    
    var angle = req;
    $('#diagram').attr('data-percent',req).css({
                "-webkit-transform": "rotate("+angle+"deg)",
                "-moz-transform": "rotate("+angle+"deg)",
                "-ms-transform": "rotate("+angle+"deg)",
                "-o-transform": "rotate("+angle+"deg)",
                "transform": "rotate("+angle+"deg)"
    }).find('span:first').text(parseInt(req))

});
});

Jquery将属性传递给div

2 个答案: