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

Question

如果时间介于 a 和b.

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

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

Answer 1

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

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

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

但是如果有 多个元素 具有 class 名称 open 您想要将三元结果插入到其中，您可以检索所有使用 querySelectorAll() 的元素，然后使用 forEach() 访问每个元素，如下所示：

    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 returns 多个元素。类旨在应用于多个对象。解决这个问题的一个选择是获取数组中的第一个元素。

这是一个例子：

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

(Shorthand 版本将使用 querySelector，尽管请记住 querySelector 比内置的 DOM 函数慢很多 - 并且它在早期版本的 IE 或火狐浏览器。)

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

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

否则（我建议，因为您只需要一个对象），就是给对象一个 ID 而不是 class。

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

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

Display open or closed for business hours using ternary statement

html

javascript

ternary-operator