我正在尝试为每个列表项添加一个点击的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的新手,所以非常感谢帮助:)
答案 0 :(得分:0)
您使用的代码无法使用,因为您为每个计时器使用相同的ID。在文档上,使用ID时,它们需要是唯一的名称。解决方法是有2个类(timer和timera),然后单击你用定时器动画替换列表项并启动它。
演示
新代码
$(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()
});