不使用jQuery能否实现显示/隐藏div？

Question

我有一个脚本现在可以工作，但是页面上其他脚本仍然存在冲突，而这些脚本我无法控制...(托管的电子商务网站，访问受限) - 有没有一种方法可以用纯JavaScript实现这个功能？

var $b = jQuery.noConflict(true);

var d = new Date();
var dayOfWeek = d.getUTCDay();
var hour = d.getUTCHours();
var mins = d.getMinutes();
var status = 'open';

if (dayOfWeek !== 6 && dayOfWeek !== 0 && hour >= 12 && hour < 22)
    status = 'open';
else
    status = 'closed';

if (status=='open')
    $b('.orderby').show();
else
    $b('.orderby').hide();

- M21

---

可能是 Show hide divs on click in HTML and CSS without jQuery 的重复问题。 - NIKHIL RANE

什么是冲突？ - epascarello

@NIKHILRANE - 我需要它计时，而不是在点击时触发。所以这与你发布的内容不同。 - M21

@epascarello - 不确定，但它会破坏购物车和结账页面，而我只能有限访问权限，无法更改那些页面。因此，我必须更改这个脚本，因为这是我可以访问的。 - M21

如果您有一个名为.hidden的类，您可以使用以下代码：http://stackoverflow.com/questions/35467207/javascript-toggle-classes-based-on-click-event - JKirchartz

Answer 1

你的代码中只有一个微小的jquery片段

if (status=='open') {
    $b('.orderby').show();
}else{
    $b('.orderby').hide();
}

这可以转换为：

if (status=='open') {
    document.querySelector('.orderby').style.visibility = "visible";
}else{
    document.querySelector('.orderby').style.visibility = "hidden";
}

- Jamiec

---

可见性与显示/隐藏不同，要达到相同的效果，您应该使用 display: block/none。 - jcubic

Answer 2

您可以使用以下内容：

var elem = document.querySelector(".elementClass");
elem.style.display = (status === 'open') ? 'block' : 'none';

- kapantzak

Answer 3

可以的。您可以使用 querySelectorAll 获取元素并循环遍历它们，然后添加一个类来设置 display: none。

显示

var el = document.querySelectorAll(".orderby");
for(var k in el){
  el[k].className = el[k].className.replace("hide", "");
}

隐藏

var el = document.querySelectorAll(".orderby");
for(var k in el){
  el[k].className += 'hide';
}

- Rajesh

---

你可以使用 classList 来避免字符串拼接。 - Jamiec

@Jamiec 我正要评论你的答案。我有一个问题，使用 quertSelectorAll(..).classList += " something" 会将类添加到所有元素中吗？还是需要循环操作？另外，我会查看你的建议。 - Rajesh

classList 不是字符串，而是一个 DOMTokenList，它有像 toggle 这样的方法 - 例如 el[k].classList.toggle("hide") - Jamiec

糟糕，我是指 className。 - Rajesh

className 不是 NodeList 的属性，而这是 querySelectorAll 返回的内容。你知道吗？文档中隐藏了所有这些信息。 - Jamiec

我想我得学习一下。我会根据你的建议更新它。 - Rajesh

Answer 4

你可以使用这个：

if (status=='open') {
        document.getElementsByClassName('orderby')[0].style.display = "block";
    }else{
        document.getElementsByClassName('orderby')[0].style.display = "none";
    }

- maverickosama92