同一页面上的多个 javascript 计数器

Question

我全年都在举办锦标赛，而且价格每天都在上涨。代码有效，但我不确定要调整哪些元素才能同时显示多个价格调整。我尝试将“rate”更改为“rate1”等，但这还不够……所以我猜测内部的变量也应该调整。任何帮助表示赞赏。我正在处理的页面在这里：http://limitlesshoops.com/jamball.html -- 下面的 sn-p 是我目前关注的内容。谢谢。

    <div class="eventbox mlk activebox"><img src="https://fiftyallstars.com/Images/jammlk.gif" class="holidayback">
    <span class="eventlabel tourney">MLK DAY SHOWCASE</span><br><div class="numberfont eventdetails">
    January 17-18, 2022<br>
    Grades: 1st-8th<br>
    Current Price: <div class="rate" style="display: inline; font-weight:bold;"></div>
    <script type="text/javascript">
        const days = (date) => Math.ceil(date.getTime() / (24 * 60 * 60 * 1000));
const DEADLINE = days(new Date("2022-01-10"));
const START = days(new Date("2021-10-01"));
const TODAY = days(new Date());
const res = Math.round(400 - 300 * ((DEADLINE - TODAY) / (DEADLINE - START)));
console.log(res);
document.querySelector('.rate').append(`$${res}`)
</script>
<br>
</div>
<table class="buttontable"><tr><td><a href="javascript:void(0);" class="eventlink"><div class="eventbutton">Brackets</div></a></td><td><a href="javascript:void(0);" class="eventlink"><div class="eventbutton">Register</div></a></td></tr></table> 
</div>



<div class="eventbox "><img src="https://fiftyallstars.com/Images/jamabe.png" class="holidayback">
    <span class="eventlabel">PREZ DAY CHALLENGE</span><br><div class="numberfont eventdetails">
    February 17-18, 2022<br>
    Grades: 1st-8th<br>
    Current Price: <div class="rate" style="display: inline; font-weight:bold;"></div>
    <script type="text/javascript">
        const days = (date) => Math.ceil(date.getTime() / (24 * 60 * 60 * 1000));
const DEADLINE = days(new Date("2022-02-10"));
const START = days(new Date("2021-10-01"));
const TODAY = days(new Date());
const res = Math.round(400 - 300 * ((DEADLINE - TODAY) / (DEADLINE - START)));
console.log(res);
document.querySelector('.rate').append(`$${res}`)
</script>
<br>
</div>
<table class="buttontable"><tr><td><a href="javascript:void(0);" class="eventlink"><div class="eventbutton">Brackets</div></a></td><td><a href="javascript:void(0);" class="eventlink"><div class="eventbutton">Register</div></a></td></tr></table> 
</div>

Answer 1

我认为您应该使用循环来生成这些 HTML 元素，因为它们具有相同的结构。它更容易维护，代码也更少。

以下是我的解决方案：

<div id="eventboxcontainer"></div>
<script type="text/javascript">
    var data = [
    {
        "title" : "MLK DAY SHOWCASE",
        "img" : "https://fiftyallstars.com/Images/jammlk.gif",
        "dateRange" : "January 17-18, 2022",
        "grades" : "1st-8th",
        "deadline" : "2022-01-10",
        "start" : "2021-10-01"
    },
    {
        "title" : "PREZ DAY CHALLENGE",
        "img" : "https://fiftyallstars.com/Images/jamabe.png",
        "dateRange" : "February 17-18, 2022",
        "grades" : "1st-8th",
        "deadline" : "2022-02-10",
        "start" : "2021-10-01"
    }
    ];

    

    var days = (date) => Math.ceil(date.getTime() / (24 * 60 * 60 * 1000));
    var TODAY = days(new Date());

    for (var i = 0; i < data.length; i++) {

        var html = "";

        var DEADLINE = days(new Date(data[i].deadline));
        var START = days(new Date(data[i].start));

        var rate = Math.round(400 - 300 * ((DEADLINE - TODAY) / (DEADLINE - START)));

        html = '<div class="eventbox mlk activebox"><img src="' + data[i].img + '" class="holidayback">'+
               '<span class="eventlabel tourney">' + data[i].title + '</span><br><div class="numberfont eventdetails">'+
               data[i].dateRange + '<br>'+
               data[i].grades + '<br>'+
               'Current Price: <div class="rate" style="display: inline; font-weight:bold;">' + rate + '</div>'+
               '<br>'+
               '</div>'+
               '<table class="buttontable"><tr><td><a href="javascript:void(0);" class="eventlink">'+
               '<div class="eventbutton">Brackets</div></a></td><td><a href="javascript:void(0);" class="eventlink">'+
               '<div class="eventbutton">Register</div></a></td></tr></table> </div>';

        // you need jQuery for this
        //$("#eventboxcontainer").append(html);

        // pure Javascript
        var element = document.querySelector("#eventboxcontainer");
        element.insertAdjacentHTML('beforeend', html);


    }

</script>