javascript - 如何使用单个 javascript 函数运行多个倒计时？

Question

我的页面在页面加载时有多个倒计时。我想让它全部使用单个 javascript 函数。我尝试了很多方法来让它发挥作用，但其中任何一种都对我有用。

我在这里发现了一些类似的问题，但没有一个对我有帮助。

我做错了什么？我该怎么办？

http://jsfiddle.net/d3g840pe/1/

HTML:

<table>
    <tr id="id1">
        <td>img</td>
        <td>#</td>
        <td>type</td>
        <td>status</td>
        <td>
            <span class="counter" rel='120'></span>
        </td>
    </tr>
    <tr id="id2">
        <td>img</td>
        <td>#</td>
        <td>type</td>
        <td>status</td>
        <td>
            <span class="counter" rel='200'></span>
        </td>
    </tr>
    <tr id="id3">
        <td>img</td>
        <td>#</td>
        <td>type</td>
        <td>status</td>
        <td>
            <span class="counter" rel='50'></span>
        </td>
    </tr>
</table>

JS:

$(function() {
    $tr = $('.counter').closest('tr');
    $trId = $tr.attr('id');
    $span = $('#' + $trId).find('.counter');
    $counter = $span.attr('rel');
    setInterval(function() {
        $counter--;
        $span.attr('rel', $counter);
        if ($counter >= 0) {
            $span.html($counter);
        }
        // Display '$counter' wherever you want to display it.
        if ($counter === 0) {
            //return true;
            console.log('finished');
            clearInterval($counter);
        }
    }, 1000);
});

Answer 1

使用 .counter 类遍历每个元素并运行 setInterval 计时器。像这样的东西

$(function () {
    $('.counter').each(function () {
        var duration = +$(this).attr('rel'), // <--- + is same as parseInt()
            $span = $(this);
        var counter = setInterval(function () {
            duration--;
            $span.attr('rel', duration);
            $span.html(duration);
            if (duration <= 0) {
                console.log('finished');
                clearInterval(counter);
            }
        }, 1000);
    });
});

这是一个演示 http://jsfiddle.net/d3g840pe/2/

此外，我不太确定您为什么使用 rel 属性。而不是像这样使用 data-* 属性

<span class="counter" data-duration=200>