Question

我有一个圆形，我通过数据百分比绘制。如果90％，它将绘制90％的形状。

每一秒我的想法是删除这个方块的1％，问题是设置数据属性不起作用，如果我通过DOM做这个形状不会更新自己。

$(document).ready(function() {    
    var charta = $(".chart");

var value = charta.data("percent");
charta.data("percent", "200");

<div class="chart" data-percent="90"></div>

Answer 1

数据属性更改时没有触发事件

因此，将data-percent属性从90更改为200将始终未被注意。

您可以创建在更改data-percent ...

时触发的自定义jQuery事件

// tell the .chart class to listen for a custom event
// called "changedDataAttribute"
$('.chart').on('changedDataAttribute', function(e){    

    // call a function to redraw the chart
    redrawMyChart(this.id,$(this).data('percent'));

});


// chain jquery commands to first change data-percent to 200
// and then trigger the custom "changedDataAttribute" event
$('.chart').data("percent",200).trigger('changedDataAttribute'); 


// redraw the chart with id==chartId
function redrawMyChart(chartId,newPercent){
    // now redraw your chart with id==chartId at newPercent
}

...但除非您因某种原因需要事件图层，否则无需添加。

相反，只要您更改redrawMyChart，就可以直接致电data-percent。

// redraw the chart with id==chartId
function redrawMyChart(chartId,newPercent){
    // now redraw at newPercent
}

数据属性刷新画布

1 个答案: