在动态列表视图上生成动画

时间:2014-12-05 17:30:03

标签: javascript jquery html jquery-mobile

我正在尝试为每个列表项添加一个点击的60秒动画饼形按钮计时器。每个列表视图都是由javascript生成的。

我尝试了不同的东西,但我永远无法使用内部的pie计时器生成每一行,每个行都有不同的时间,具体取决于点击。

为了更好地理解我在这里要完成的工作是创建列表行的计时器动画:FIDDLE LINK

列表视图创建的一些代码:

 var listCreated = false;

 function appendToList() {

     //Create the listview if not created
     if (!listCreated) {
         $("#content").append("<ul id='list' data-role='listview' data-inset='true'></ul>");
         listCreated = true;
         $("#content").trigger("create");
     }
     $("#list").append("<li>Item</li>");
     $("#list").listview("refresh");

 }

我是jQuery mobile的新手,所以非常感谢帮助:)

1 个答案:

答案 0 :(得分:0)

您使用的代码无法使用,因为您为每个计时器使用相同的ID。在文档上,使用ID时,它们需要是唯一的名称。解决方法是有2个类(timer和timera),然后单击你用定时器动画替换列表项并启动它。

演示

http://jsfiddle.net/furhpjah/

新代码

$(document).on("click", "li", function () {
$(".timer").replaceWith("<div class='timera'>0</div>");
$(this).replaceWith("<li><a><div class='timer'></div>Timer Running</a></li>");
$("#list").listview("refresh");
runTimer() 
});