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，则需要更新此行以反映如何查找要更新的count html。有关遍历DOM的更多有用信息，请参阅this link。

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

＆＃13;

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);

＆＃13;

<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>

＆＃13;

如何将元素更改为Id以显示计时器

1 个答案: