Tengo varios divs diferentes, cada uno de los cuales representa un elemento. Estoy usando atributos de datos para asignar una fecha de inicio y una fecha de finalización a cada uno. Luego tengo una función escrita para verificar si la fecha actual está dentro de este rango. Si es así, entonces tengo más código que agregará display:block a cada div. Para cada div tengo líneas separadas de código que estoy tratando de averiguar cómo reescribir para que se repita. Quiero tener tantos divs (elementos) como sea necesario sin tener que agregar un nuevo código para cada uno específico. Lo que tengo funciona pero es muy redundante y engorroso de mantener.
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; }¡Gracias!
Déles a todos una clase en común: si col-12 no se usa en otro lugar, puede usar eso. Luego simplemente itere sobre todos los elementos que coincidan con esa clase.
El tercer parámetro no proviene de información externa a la función, por lo que no es necesario.
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; }