Javascript 倒计时不在 C# Foreach 循环内迭代

Question

我已经编写了一个 foreach 循环代码来迭代产品列表(产品通过 jquery 内容 slider 旋转)，并且我想在该循环内添加一个 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

第一个问题也是主要问题是渲染的 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();

所以，回顾一下这些变化:

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