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

Question

我写了一个 foreach 循环代码来遍历产品列表（产品通过 jquery 内容滑块旋转），我想在这个循环中添加一个 javascript 倒计时，但问题是倒计时只出现在这个循环的第一个产品中，如下所示：但是当它遍历其他产品时，它没有出现这是我写的代码<div id="rightBox">        @foreach (var product in Model)        {            <div id="[e-mail]" 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>

Answer 1

第一个也是主要的问题是您呈现的 HTML 中有重复的 ID 值。当您尝试使用 getElementById 选择这些元素时，这将导致问题。所以，让我们先解决这个问题：

<div id="rightBox">

    @foreach (var product in Model)

    {

        <div id="[e-mail]" 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循环。

Answer 2

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