Question

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

我尝试了以下操作，但是.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()检索所有元素然后使用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返回多个元素。类被设计为应用于多个对象。解决此问题的一种方法是获取数组中的第一个元素。

这是一个例子：

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');

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

2 个答案: