使用三元语句显示营业时间的营业时间或关闭时间

Question

如果时间在a 和b 之间，我只是尝试在类名为open 的元素内显示“打开”或“关闭”文本。

我尝试了以下操作，但 .open 元素上没有显示任何内容。这段代码有什么问题？

const hours = new Date().getHours()
const openHours = (hours >= 8 && hours < 17) ? 'Open' : 'Closed'
document.getElementsByClassName('open').innerHTML = openHours

Answer 1

如果您的页面中只有一个类名为 open 的元素，只需使用 querySelector()，如下所示：

const hours = new Date().getHours()
const openHours = (hours >= 8 && hours < 17) ? 'Open' : 'Closed'
document.querySelector('.open').innerHTML = openHours

<p class="open"></p>

---

但如果有多个元素的类名称为open 想要插入三元结果，则可以使用querySelectorAll() 检索所有元素，然后使用@ 987654327@ 像这样访问每个元素：

    const hours = new Date().getHours()
    const openHours = (hours >= 8 && hours < 17) ? 'Open' : 'Closed'
    document.querySelectorAll('.open').forEach(x => {
        x.innerHTML = openHours
        // here, x is every div with the `open` class name that you have queried above.
    })

<p class="open"></p>
<p class="open"></p>

Answer 2

函数 getElementsByClassName 返回多个元素。类旨在应用于多个对象。解决此问题的一个选项是获取数组中的第一个元素。

这是一个例子：

var elements = document.getElementsByClassName('open');
elements[0].innerHTML = openHours

（此方法的简写版本将使用 querySelector，但请记住，querySelector 比内置 DOM 函数慢得多 - 并且早期版本的 IE 或 FireFox 不支持它。）

循环遍历类中的每个元素也是另一种选择：

var elements= document.getElementsByClassName("open");
for(var i = 0; i < elements.length; i++)
{
   elements[i].innerHTML = openHours
}

否则（我会推荐，因为您只需要一个对象），是给对象一个 ID 而不是一个类。

<div id="openStatus"></div>
document.getElementById('openStatus');