Question

我正在尝试修改此JQuery Countdown插件，以便在其 div 或 span 中具有值时对其进行初始化。我需要因为我正在构建一个应用程序，允许人们在他们的页面上进行任意数量的倒计时，并且他们选择了目标日期/时间。

作为参考，我在ASP.Net中使用我的网络应用程序，但我不认为这对我的问题很重要。

日期将来自数据库，但我可能会在代码隐藏中在几秒钟内转换它。基本上，我希望能够抛出像

这样的东西

<div id="93" class="countdown">300</div> /* Countdown of 300 seconds, 5 minutes */
<div id="104" class="countdown">19483</div> /*Countdown of 5 hours, 24 minutes and 43 seconds */

并从一行JQuery初始化所有这些

$(".countdown").countdown();

或

$(".countdown").countdown("initializeFromValue");

我开始熟悉JQuery本身，但我很难在后面更改javascript。我已经开始在代码中创建一个新的部分。我的问题是验证div是否具有整数值，然后将Countdown的值初始化为该值，之后删除该值。

我也一直试图在测试页面上进行4次倒计时：

    $(function () {
        $("#countdown").countdown({ until: $("#countdown").text() });
        $("#countdown2").countdown({ until: $("#countdown2").text() });
        $("#countdown3").countdown({ until: $("#countdown3").text() });
        $("#countdown4").countdown({ until: $("#countdown4").text() });
    });

这是有效的，因为每个倒计时都有一个唯一的ID，我也可以获得自己的文本值。但它不灵活。我也可以从那里出发吗？我肯定知道

$(".countdown").countdown({ until: $(this).text() });

不起作用，因为它认为“this”是“document”。

有人可以请我转到一些文档/教程，可以帮我解决这个问题吗？谢谢。

Answer 1

$(".countdown").each(function(i) {
    $(this).countdown({ until: $(this).text() });
});

有关详细信息，请参阅jQuery上的.each()文档。但是在传递给each()的闭包范围内，this是匹配的DOM元素。

Answer 2

32bitkid有正确的想法。原因如下：

当你使用$（“。countdown”）时，你正在选择所有具有类倒计时的div。你甚至可以将它们分配给一个数组并使用for循环迭代但是jquery为我们提供了.each（）的合成糖，所以想法是

 $(".countdown").each(function()   //loop through all divs with countdown as class
 {
   $(this).countdown({until: $(this).text()};  // "this" is not the specific div we are 
 }                                             //iterating on

希望这有助于他的方法的工作原理

Answer 3

我会使用每个循环为this创建正确的上下文：

// all elements with id starting with 'countdown'
$("[id^='countdown']").each(function() {
    $(this).countdown({ until: $(this).text() });
});

来自div值的JQuery Countdown插件

3 个答案: