2013-05-26 50 views
1

我是JQuery的新手,并且正在阅读有关将数据附加到Jquery对象的内容。我试图创建一个计时器作为例子,但无法让它工作。是关于我使用的JQuery版本吗?我在网上找到了几个例子,但不能让我自己的代码工作。任何帮助是可观的。下面是我的代码:JQuery setData事件

*

<style type="text/css"> 
.progresscont{ 
    width:200px; 
    height:50px; 
    float:left; 
    background-color:#FFFFD5; 
    border:solid 1px #CCC; 
} 
.progress{ 
    background-color:red; 
    width:20px; 
    height:50px; 
} 
.percenttext{ 
    font-weight:bold; 
} 
</style> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
<script language="javascript"> 
$(document).ready(function(){ 
var id=1,i=0; 
//create a div with progress bar and the value 
var progress = $('<div></div>') 
.attr('id','progresscont'+id) 
.addClass('progresscont') 
.append(
    $('<div></div>') 
    .addClass('progress') 
    .append(
     $('<div>0%</div>') 
     .attr('id','percenttext'+id) 
     .addClass('percenttext') 
    ) 
) 
.data('perc','0') 
.bind('setData',function(evt,key,value){ 
    switch(key){ 
    case 'perc': 
    $(this).width(value+'%'); 
    break; 
    } 
} 
) 
.appendTo($(document.body)); 
}); 
function setcounter(val){ 
progress.data('perc',val); 
setTimeout(setcounter(val+1),1000); 
} 
setcounter(0); 
</script> 

*

谢谢

回答

0

没有一个setData事件,我知道的......也许在一个插件?

无论哪种方式,尝试这样的事情(demo):

$(function() { 
    var id = 1, 
     i = 0; 
    //create a div with progress bar and the value 
    var progress = $('<div></div>') 
     .attr('id', 'progresscont' + id) 
     .addClass('progresscont') 
     .data('perc', '0') 
     .appendTo($(document.body)) 
     .append(
      $('<div></div>') 
       .addClass('progress') 
       .append(
        $('<div>0%</div>') 
         .attr('id', 'percenttext' + id) 
         .addClass('percenttext') 
       ) 
     ); 

    function setcounter(val) { 
     if (val > 100) { return; } 
     progress.data('perc', val) 
      .find('.progress') 
      .width(val + '%') 
      .find('.percenttext').text(val + '%') 
     setTimeout(function(){ 
      setcounter(val + 1); 
     }, 50); 
    } 
    setcounter(0); 

}); 
+0

谢谢你的回复。我的目标是练习使用setData事件。我在JQuery Cookbook中阅读了它。谢谢 – mrida

+0

也许他们提供它作为一个插件? – Mottie

0

使用setData事件提供了支持之前的jQuery版本1.8或1.9至。我看到你正在使用v.2.0。