javascript - 如何将元素更改为显示计时器的 Id

Question

这段代码

function toTimeString(seconds) {
    return (new Date(seconds * 1000)).toUTCString().match(/(\d\d:\d\d:\d\d)/)[0];
}

function startTimer() {
    var dataStartElem = $(this);
    var dataStart = dataStartElem.attr('data-start');
    if (dataStart == 'false') {
        dataStartElem.attr('data-start', 'true');
        var nextElem = dataStartElem.parents('#count').next();
        var duration = dataStartElem.attr('data-value');
        var a = duration.split(':');
        var seconds = (+a[0]) * 60 * 60 + (+a[1]) * 60 + (+a[2]);
        setInterval(function () {
            seconds--;
            if (seconds >= 0) {
                nextElem.html(toTimeString(seconds));
                dataStartElem.attr('data-start', 'false');
            }
            if (seconds === 0) {
                alert('sorry, out of time');
                clearInterval(seconds);
            }
        }, 1000);
    }
}
$('#timer').on('click', startTimer);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <td>
            <a id="timer" class="btn btn-primary" href="https://google.com" target="blank" data-value='00:00:05' data-start='false' role="button">Link 5 seconds <i class="fa fa-external-link" aria-hidden="true"></i></a>
        </td>
        <td id="count">00:00:00</td>
    </tr>
    <tr>
        <td>
           <a id="timer" class="btn btn-primary" href="https://google.com" target="blank" data-value='00:05:00' data-start='false' role="button">Google 5 minutes <i class="fa fa-external-link" aria-hidden="true"></i></a>
        </td>
        <td id="count">00:00:00</td>
    </tr>
</table>

上面的代码在我使用时不起作用

    <td id="count"> 00:00:00 </td>

但仅在使用 https://jsfiddle.net/qxxoqmqd/3/ 时有效

    <td> 00:00:00 </td>

使用时如何工作

    <td id="count"> 00:00:00 </td>

我已将 dataStartElem 替换为 dataStartId，但这也不起作用。

Answer 1

ID(#timer 或 id="timer")对于网页来说是唯一的。 $('#timer') 只会匹配一个元素。尝试将计时器更改为类，并使用 jQuery 中的类选择器 $('.timer'):

#count 似乎也不是您要查找的计时器的父级。您不能简单地执行 dataStartElement.parents('#count')。如果修改 DOM，则需要更新此行以反射(reflect)如何找到要更新的 count html。请参阅this link有关遍历 DOM 的更多有用信息。

使用 dataStartElem.parent().next('.count') 我能够找到您的 count 元素以便更新 html。

function toTimeString(seconds) {
    return (new Date(seconds * 1000)).toUTCString().match(/(\d\d:\d\d:\d\d)/)[0];
}

function startTimer() {
    var dataStartElem = $(this);
    var dataStart = dataStartElem.attr('data-start');
    if (dataStart == 'false') {
        dataStartElem.attr('data-start', 'true');
        var nextElem = dataStartElem.parent().next('.count');
        var duration = dataStartElem.attr('data-value');
        var a = duration.split(':');
        var seconds = (+a[0]) * 60 * 60 + (+a[1]) * 60 + (+a[2]);
        setInterval(function () {
            seconds--;
            if (seconds >= 0) {
                nextElem.html(toTimeString(seconds));
                dataStartElem.attr('data-start', 'false');
            }
            if (seconds === 0) {
                alert('sorry, out of time');
                clearInterval(seconds);
            }
        }, 1000);
    }
}
$('.timer').on('click', startTimer);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <td>
            <a class="btn btn-primary timer" href="https://google.com" target="blank" data-value='00:00:05' data-start='false' role="button">Link 5 seconds <i class="fa fa-external-link" aria-hidden="true"></i></a>
        </td>
        <td class="count">00:00:00</td>
    </tr>
    <tr>
        <td>
           <a class="btn btn-primary timer" href="https://google.com" target="blank" data-value='00:05:00' data-start='false' role="button">Google 5 minutes <i class="fa fa-external-link" aria-hidden="true"></i></a>
        </td>
        <td class="count">00:00:00</td>
    </tr>
</table>