Javascript倒计时未在C＃Foreach循环内迭代

Question

我写了一个foreach循环代码来遍历产品列表（产品通过jquery内容滑块旋转），我想在此循环中添加一个javascript倒计时，但问题是倒计时仅出现在该循环的第一个产品中，如下所示：

但是当迭代其他产品时，它不会出现

这是我写的代码

<div id="rightBox">
        @foreach (var product in Model)
        {
            <div id="fragment-@product.Id" class="ui-tabs-panel" style="">
                <div style="float: right">
                    <div class="banner"></div>
                    <img class="img-content" src="~/Content/ProductImages/@product.Image" alt="" />
                </div>
                <div class="content">
                    <div class="column">
                        <span class="fa" style="text-decoration: line-through; font-size: 1.9rem">@product.MainPrice.ToString("N0") تومان</span>
                        <div style="margin: 10px 10px 10px 10px;"></div>
                        <span class="fa" style="color: #ef5661; font-size: 1.9rem">@string.Format("{0:N0}", product.DiscountPrice) تومان</span>
                    </div>
                    <div class="columnleft fa">
                        ٪@Math.Floor((1 - (product.DiscountPrice / product.MainPrice)) * 100)&emsp;
                        <span> تخفیف </span>
                    </div>
                    <div class="title">
                        <p>@product.Name</p>
                    </div>
                    <br />
                    <div class="desclist">
                        @Html.Raw(product.Description)
                    </div>
                    <div class="fa" style="bottom: 50px; position: absolute">
                        <hr />
                        <div class="fa" style="font-size: x-large">
                            <span class="fa" id="hrRemaining"></span>:<span id="minRemaining"></span>:<span id="secRemaining"></span>
                        </div>                            
                        <p>زمان باقیمانده تا پایان سفارش</p>
                    </div>
                </div>
            </div>
        }
    </div>

这是javascript倒数计时码

<script>
        var remSeconds = Math.floor(@timeRemaining);
        var secondsCounter = Math.floor(remSeconds % 60);
        var minutesCounter = Math.floor((remSeconds / 60) % 60);
        var hoursCounter = Math.floor((remSeconds / 3600));

        function formatNumber(number) {
            if (number < 10)
                return '0' + number;
            else
                return '' + number;
        }

        function startTick() {
            document.getElementById('secRemaining').innerText = formatNumber((secondsCounter));
            document.getElementById('minRemaining').innerText = formatNumber((minutesCounter));
            document.getElementById('hrRemaining').innerText = formatNumber((hoursCounter));
            //document.getElementById('tRemaining').innerText = formatNumber((remSeconds));

            var _tick = setInterval(function () {
                if ((remSeconds) > 0) {
                    if (hoursCounter > 0) {
                        if (minutesCounter == 0) {
                            minutesCounter = 60;
                            hoursCounter = hoursCounter - 1;
                        }
                    }
                    if (secondsCounter == 0) {
                        secondsCounter = 60;
                        minutesCounter = minutesCounter - 1;
                    }
                    secondsCounter = secondsCounter - 1;
                    remSeconds = remSeconds - 1;

                    document.getElementById('secRemaining').innerText = formatNumber((secondsCounter));
                    document.getElementById('minRemaining').innerText = formatNumber(parseInt(minutesCounter));
                    document.getElementById('hrRemaining').innerText = formatNumber(parseInt(hoursCounter));
                    document.getElementById('clock').innerHTML = "Hello" + "<span class='fa' id='hrRemaining'>" + "</span>:<span id='minRemaining'></span>" + "<span id='secRemaining'></span>";
                    //document.getElementById('tRemaining').innerText = formatNumber(parseInt(remSeconds));
                } else {
                    clearInterval(_tick);
                    //document.getElementById("tRemaining").innerHTML = "EXPIRED";
                }
            }, 1000);
        }

        startTick();
    </script>

Answer 1

这是因为您使用的是ID。 ID在HTML中必须唯一。 如果这些项目中的每一个都有相同的剩余时间，则只需将ID更改为类。 如果它们是唯一的倒计时，那么您可能应该将它们添加到模型中，并为每个产品生成唯一的ID。 那么显然您需要修改您的JavaScript来跟踪ID。

Answer 2

第一个也是主要的问题是，渲染的HTML中有重复的ID值。 当您尝试使用getElementById选择那些元素时，这将导致问题。 因此，让我们首先解决该问题：

<div id="rightBox">
    @foreach (var product in Model)
    {
        <div id="fragment-@product.Id" class="ui-tabs-panel" style="">
            <div style="float: right">
                <div class="banner"></div>
                <img class="img-content" src="~/Content/ProductImages/@product.Image" alt="" />
            </div>
            <div class="content">
                <div class="column">
                    <span class="fa" style="text-decoration: line-through; font-size: 1.9rem">@product.MainPrice.ToString("N0") تومان</span>
                    <div style="margin: 10px 10px 10px 10px;"></div>
                    <span class="fa" style="color: #ef5661; font-size: 1.9rem">@string.Format("{0:N0}", product.DiscountPrice) تومان</span>
                </div>
                <div class="columnleft fa">
                    ٪@Math.Floor((1 - (product.DiscountPrice / product.MainPrice)) * 100)&emsp;
                    <span> تخفیف </span>
                </div>
                <div class="title">
                    <p>@product.Name</p>
                </div>
                <br />
                <div class="desclist">
                    @Html.Raw(product.Description)
                </div>
                <div class="fa" style="bottom: 50px; position: absolute">
                    <hr />
                    <div class="fa countdown-timer" style="font-size: x-large">
                        <span class="fa hrRemaining"></span>:<span class="minRemaining"></span>:<span class="secRemaining"></span>
                    </div>                            
                    <p>زمان باقیمانده تا پایان سفارش</p>
                </div>
            </div>
        </div>
    }
</div>

我将您的id属性替换为类，我们可以在下面添加的代码中利用这些属性。

由于您已使用jQuery标记了此代码，因此我将您的示例重写为使用jQuery而不是原始JavaScript：

var remSeconds = Math.floor(@timeRemaining);
var secondsCounter = Math.floor(remSeconds % 60);
var minutesCounter = Math.floor((remSeconds / 60) % 60);
var hoursCounter = Math.floor((remSeconds / 3600));

function formatNumber(number) {
    if (number < 10)
        return '0' + number;
    else
        return '' + number;
}

function startTimers(){

    // The variables prefixed with `$` represent jQuery objects. Using $ isn't necessary, but it 
    // makes it a bit more obvious that it's not a "data" variable

    // This will select all elements with the class 'countdown-timer'
    var $timers = $('.countdown-timer');

    // See https://api.jquery.com/each/
    $timers.each(function(){
        // `this` is the current `.countdown-timer` being iterated by jQuery.each()
        var $timer = $(this);

        var $seconds = $timer.find('.secRemaining');
        var $minutes = $timer.find('.minRemaining');
        var $hours = $timer.find('.hrRemaining');

        $seconds.text(formatNumber((econdsCounter));
        $minutes.text(formatNumber(minutesCounter));
        $hours.text(formatNumber(hoursCounter));

        var _tick = setInterval(function () {
            if (remSeconds > 0) {
                if (hoursCounter > 0) {
                    if (minutesCounter == 0) {
                        minutesCounter = 60;
                        hoursCounter = hoursCounter - 1;
                    }
                }

                if (secondsCounter == 0) {
                    secondsCounter = 60;
                    minutesCounter = minutesCounter - 1;
                }

                secondsCounter = secondsCounter - 1;
                remSeconds = remSeconds - 1;

                $seconds.text(formatNumber((econdsCounter));
                $minutes.text(formatNumber(minutesCounter));
                $hours.text(formatNumber(hoursCounter));                    
            } else {
                clearInterval(_tick);
                //document.getElementById("tRemaining").innerHTML = "EXPIRED";
            }
        }, 1000);
    }
}

startTimers();

因此，回顾一下这些变化：

• 我在<div>元素中添加了一个名为countdown-timer的类，该类用于包含小时，分钟和秒元素。
• 我将id属性切换为class属性，这使我们可以重新使用“选择器”-标识计时器元素的类
• 我将函数重命名为startTimers ，但这只是因为（对我而言）它可以更准确地描述函数的用法。
• 在startTimers ，我使用jQuery选择每个计时器元素（以countdown-timer表示），这将返回我可以视为数组的内容。
• 然后，我使用$('selector').each()函数遍历计时器数组，设置匹配元素的文本值并启动setInterval循环。