在特定 XX:YY 输入之后每 15 分钟（即 10:00、10:15）过滤一次输入答案

【问题标题】：Filtering Out Every 15th Minute (i.e. 10:00, 10:15) Inputs After Specific XX:YY Input在特定 XX:YY 输入之后每 15 分钟（即 10:00、10:15）过滤一次输入
【发布时间】：2022-01-15 21:12:24
【问题描述】：

只是想知道是否有一种方法可以减少此代码，因为有很多 getElementById，可能使用数组等？

这里使用数组的主要问题（我相信）是 2 小时的时差。 disabled=true 也是 Internet Explorer 所必需的（烦人），因为 display=none 不适用于 IE 中的选项选择框。

<SCRIPT>
// IF TODAY IS SELECTED, ONLY ALLOW TIMES LATER IN THE DAY FROM DROP DOWN (2 hours in advance)
if (select.value == "<?php echo date("d-m-Y");?>") {
    if ("<?php echo date("H:i");?>" > "10:00") {document.getElementById("12:00pm").style.display = 'none'; document.getElementById("12:00pm").disabled = true;}
    if ("<?php echo date("H:i");?>" > "10:15") {document.getElementById("12:15pm").style.display = 'none'; document.getElementById("12:15pm").disabled = true;}
    if ("<?php echo date("H:i");?>" > "10:30") {document.getElementById("12:30pm").style.display = 'none'; document.getElementById("12:30pm").disabled = true;}
    if ("<?php echo date("H:i");?>" > "10:45") {document.getElementById("12:45pm").style.display = 'none'; document.getElementById("12:45pm").disabled = true;}
    if ("<?php echo date("H:i");?>" > "11:00") {document.getElementById("13:00pm").style.display = 'none'; document.getElementById("13:00pm").disabled = true;}
    if ("<?php echo date("H:i");?>" > "11:15") {document.getElementById("13:15pm").style.display = 'none'; document.getElementById("13:15pm").disabled = true;}
    if ("<?php echo date("H:i");?>" > "11:30") {document.getElementById("13:30pm").style.display = 'none'; document.getElementById("13:30pm").disabled = true;}
    if ("<?php echo date("H:i");?>" > "11:45") {document.getElementById("13:45pm").style.display = 'none'; document.getElementById("13:45pm").disabled = true;}
    if ("<?php echo date("H:i");?>" > "12:00") {document.getElementById("14:00pm").style.display = 'none'; document.getElementById("14:00pm").disabled = true;}
    if ("<?php echo date("H:i");?>" > "12:15") {document.getElementById("14:15pm").style.display = 'none'; document.getElementById("14:15pm").disabled = true;}
    if ("<?php echo date("H:i");?>" > "12:30") {document.getElementById("14:30pm").style.display = 'none'; document.getElementById("14:30pm").disabled = true;}
    if ("<?php echo date("H:i");?>" > "12:45") {document.getElementById("14:45pm").style.display = 'none'; document.getElementById("14:45pm").disabled = true;}
    if ("<?php echo date("H:i");?>" > "13:00") {document.getElementById("15:00pm").style.display = 'none'; document.getElementById("15:00pm").disabled = true;}
    if ("<?php echo date("H:i");?>" > "13:15") {document.getElementById("15:15pm").style.display = 'none'; document.getElementById("15:15pm").disabled = true;}
    if ("<?php echo date("H:i");?>" > "13:30") {document.getElementById("15:30pm").style.display = 'none'; document.getElementById("15:30pm").disabled = true;}
    if ("<?php echo date("H:i");?>" > "13:45") {document.getElementById("15:45pm").style.display = 'none'; document.getElementById("15:45pm").disabled = true;} 
    if ("<?php echo date("H:i");?>" > "14:00") {document.getElementById("16:00pm").style.display = 'none'; document.getElementById("16:00pm").disabled = true;}
    if ("<?php echo date("H:i");?>" > "14:15") {document.getElementById("16:15pm").style.display = 'none'; document.getElementById("16:15pm").disabled = true;}
    if ("<?php echo date("H:i");?>" > "14:30") {document.getElementById("16:30pm").style.display = 'none'; document.getElementById("16:30pm").disabled = true;}
    if ("<?php echo date("H:i");?>" > "14:45") {document.getElementById("16:45pm").style.display = 'none'; document.getElementById("16:45pm").disabled = true;}
    if ("<?php echo date("H:i");?>" > "15:00") {document.getElementById("17:00pm").style.display = 'none'; document.getElementById("17:00pm").disabled = true;}
    if ("<?php echo date("H:i");?>" > "15:15") {document.getElementById("17:15pm").style.display = 'none'; document.getElementById("17:15pm").disabled = true;}
    if ("<?php echo date("H:i");?>" > "15:30") {document.getElementById("17:30pm").style.display = 'none'; document.getElementById("17:30pm").disabled = true;}
    if ("<?php echo date("H:i");?>" > "15:45") {document.getElementById("17:45pm").style.display = 'none'; document.getElementById("17:45pm").disabled = true;}
    if ("<?php echo date("H:i");?>" > "16:00") {document.getElementById("18:00pm").style.display = 'none'; document.getElementById("18:00pm").disabled = true;}
    if ("<?php echo date("H:i");?>" > "16:15") {document.getElementById("18:15pm").style.display = 'none'; document.getElementById("18:15pm").disabled = true;}
    if ("<?php echo date("H:i");?>" > "16:30") {document.getElementById("18:30pm").style.display = 'none'; document.getElementById("18:30pm").disabled = true;}
    if ("<?php echo date("H:i");?>" > "16:45") {document.getElementById("18:45pm").style.display = 'none'; document.getElementById("18:45pm").disabled = true;}
    if ("<?php echo date("H:i");?>" > "17:00") {document.getElementById("19:00pm").style.display = 'none'; document.getElementById("19:00pm").disabled = true;}
    if ("<?php echo date("H:i");?>" > "17:15") {document.getElementById("19:15pm").style.display = 'none'; document.getElementById("19:15pm").disabled = true;}
    if ("<?php echo date("H:i");?>" > "17:30") {document.getElementById("19:30pm").style.display = 'none'; document.getElementById("19:30pm").disabled = true;}
    if ("<?php echo date("H:i");?>" > "17:45") {document.getElementById("19:45pm").style.display = 'none'; document.getElementById("19:45pm").disabled = true;}
    if ("<?php echo date("H:i");?>" > "18:00") {document.getElementById("20:00pm").style.display = 'none'; document.getElementById("20:00pm").disabled = true;}
}
</SCRIPT>

【问题讨论】：

作为惩罚，你将复制一百次："I should not duplicate code"，但只使用两行代码。
找到模式。你的 JavaScript 是“通过 ID 获取一些东西并用它做一些事情”，它可以归结为一个函数。您的时间变量可以是两个循环，一个从 10 到 18，另一个是四个时间间隔，或者您可以按时间增量执行一个循环。
这个问题可能属于codereview

标签： javascript php arrays

【解决方案1】：

解决方法：基本上使用`filter()`

提供您的元素类，然后通过document.getElementsByClassName（MDN 网络链接）获取它们。之后，只需在HTMLCollection 上使用Array.from()，然后filter() 来确定是否要显示该元素。

快速有效的演示

下面的演示：我们在 12:42 之后隐藏所有内容。

// IF TODAY IS SELECTED, ONLY ALLOW TIMES LATER IN THE DAY FROM DROP DOWN (2 hours in advance)
//var timevar = "<?php echo date("H:i");?>";
var timevar = "12:42";

var tmp = document.getElementsByClassName('time-div');
var temp_array = [],
length = tmp.length;

for (var i = 0; i < length; i++) {
temp_array.push(tmp[i]);
}

temp_array.filter(function(e) {
    if(e.id > timevar) {
        e.style.display = 'none';
        e.disabled = true;
    }
});

<div id="12:00" class="time-div">12:00</div>
<div id="12:15" class="time-div">12:15</div>
<div id="12:30" class="time-div">12:30</div>
<div id="12:45" class="time-div">12:45</div>
<div id="13:00" class="time-div">13:00</div>
<div id="13:15" class="time-div">13:15</div>

【讨论】：

出色的解决方案，但在 IE 中不起作用：对象不支持“来自”的属性或方法
嘿，@Mike'Ambroid'Foran，you are right, just fixed that up。刚刚在这里使用了解决方案：https://stackoverflow.com/a/41261546/2430549 现在应该可以工作了。
哦，嘿，别忘了如果你accept an answer对别人有帮助，如果有用，谢谢！
是的，看来该解决方案有效:)