jquery將屬性傳遞給div

我目前正在嘗試使Monochromer的Circle Diagram Jquery響應頁面上的事件/更改。也就是說，如果我更改表單字段百分比，圖表會更新。jquery將屬性傳遞給div

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>

來源

2014-12-29 Brandrally

你想改變什麼？只需將輸入值傳遞給數據百分比屬性？ – kapantzak

通過查看此插件的代碼，無法重繪圖。 –

@kapantzak嗨，我只是想要新的值來影響生成的圖形的設計。也就是說，如果我點擊20％字段，餅圖會更新以反映這一點。所以是的，數據百分比字段。 – Brandrally

在這裏你去：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的;）），重要的是利用「 data' by the plugin：它不只是$（）。attr（「data-something」）的別名，而是數據的當前狀態，當你更新屬性本身時不會改變。

另外這個插件非常簡單 - 這是一個「一杆」，所以你需要刪除它的結果，並在改變值後再次啓動它。

來源

2014-12-29 09:10:48 piXelRider

感謝您的幫助和確實的解釋。有時候我會發現一些事情，有時候我會偏離正軌。真的很欣賞這種見解。 – Brandrally

它看起來像要更新的屬性，但是你沒有發射任何情況下刷新圓圈更新的值。這個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)) 

}); 
});

來源

2014-12-29 08:26:19

jquery將屬性傳遞給div

回答

相關問題