如何循环此 javascript 函数以删除冗余代码？

Question

我有多个不同的 div，每个代表一个项目。我正在使用数据属性为每个属性分配开始日期和结束日期。然后我写了一个函数来检查当前日期是否在这个范围内。如果是，那么我有更多代码可以将 display:block 添加到每个 div。对于每个 div 我都有单独的代码行，我试图弄清楚如何重写它以使其循环。我想根据需要拥有尽可能多的 divs（项目），而不必为每个特定代码添加新代码。我所拥有的正在运行，但非常多余且难以跟上。

HTML:

<!--Class A-->
   <div id="Class-A" class="col-12" data-class-start="1/1/2022" data-class-end="4/23/2022">
      <h1>Example</h1>
   </div>

<!--Class B-->
   <div id="Class-B" class="col-12" data-class-start="2/1/2022" data-class-end="4/23/2022">
      <h1>Example</h1>
   </div>

<!--Class C-->
   <div id="Class-C" class="col-12" data-class-start="3/1/2022" data-class-end="4/23/2022">
      <h1>Example</h1>
   </div>

JS:

/*--Class A--*/
var startA = document.getElementById("Class-A").getAttribute("data-class-start");
var endA = document.getElementById("Class-A").getAttribute("data-class-end");
if(dateCheck(startA, endA, new Date())) {
    document.getElementById("Class-A").style.display = "block";
  }

/*--Class B--*/
var startB = document.getElementById("Class-B").getAttribute("data-class-start");
var endB = document.getElementById("Class-B").getAttribute("data-class-end");
if(dateCheck(startB, endB, new Date())) {
    document.getElementById("Class-B").style.display = "block";
  }

/*--Class C--*/
var startC = document.getElementById("Class-C").getAttribute("data-class-start");
var endC = document.getElementById("Class-C").getAttribute("data-class-end");
if(dateCheck(startC, endC, new Date())) {
    document.getElementById("Class-C").style.display = "block";
  }

/*---Date Check Function--*/
function dateCheck(from,to,check) {

    var sDate,eDate,cDate;
    sDate = Date.parse(from);
    eDate = Date.parse(to);
    cDate = Date.parse(check);

    if((cDate <= eDate && cDate >= sDate)) {
        return true;
    }
    return false;
}

谢谢！

Answer 1

给他们一个共同的 class - 如果 col-12 没有在别处使用，你可以使用它。然后遍历匹配 class.

的所有元素

第三个参数不是来自函数外部的信息，所以不需要。

for (const elm of document.querySelectorAll('.col-12')) {
    if (dateCheck(elm.dataset.classStart, elm.dataset.classEnd)) {
        elm.style.display = 'block';
    }
}

function dateCheck(from, to) {
    const cDate = new Date();
    const sDate = Date.parse(from);
    const eDate = Date.parse(to);
    return cDate <= eDate && cDate >= sDate;
}

如何循环此 javascript 函数以删除冗余代码？

How can I loop this javascript function to remove redundant code?

javascript

attributes

loops

display