Question

这不是完整的代码，但它完全覆盖了错误区域

<body onload="init()">
    <nav>
      <h1 style="font-family:Helvetica;">
        <ul class="nav">
          <li ><a href="#">Menu 1</a>
            <ul>
              <li id="navbar-menu"><a href="#">Sub-menu Item 1</a></li>
              <li id="navbar-menu"><a href="#">Sub-menu Item 2</a></li>
              <li id="navbar-menu"><a href="#">Sub-menu Item 3</a></li>
            </ul>
          </li>
        </ul>
      </h1>
    </nav>
<body>

总共有4个菜单。

.nav li ul a:hover {
   background: rgb(96, 235, 245);
    color:white;
  }

body {

    color:white;
  }

当我将鼠标悬停在子菜单上时，nav li ul a：hober中的背景颜色出现。我打算做的是改变用户的颜色。因此，在我的代码中，我删除了我的bg颜色，因此它与java脚本没有冲突，因为我已经对body执行了相同操作。但它不起作用。这是我的代码的完整Java脚本：

function init() {
  function setBackgroundForTimeOfDay() {
    const body = document.querySelector('body');
    const hours = new Date().getHours();

    if (hours < 6 || hours >= 18)
      body.style.background = 'linear-gradient(to right, rgb(39, 38, 38), rgb(245, 96, 96),rgb(39, 38, 38))';

    else
      body.style.background = 'linear-gradient(to right, rgb(39, 38, 38), rgb(96, 235, 245),rgb(39, 38, 38))';
  }
  setBackgroundForTimeOfDay();
  setInterval(setBackgroundForTimeOfDay, 60000);
}

function init1() {
  function setBackgroundForTimeOfDay() {
    const li = document.getElementById('navbar-menu');
    const hours = new Date().getHours();

    if (hours < 6 || hours >= 18)
      li.style.background = 'rgb(245, 96, 96)';

    else
      li.style.background = 'rgb(96, 235, 245)';
  }

  setBackgroundForTimeOfDay();
  setInterval(setBackgroundForTimeOfDay, 60000);
}
init1();

你能解释一下这里有什么问题

Answer 1

Isn真的不清楚你想要什么，但最重要的错误是你不能设置3个元素ID，ID必须是唯一的！使用class更改它并以这种方式更改逻辑：

function init1() {
  function setBackgroundForTimeOfDay() {

    //_______________ getElementById ______________________
    var li = document.getElementsByClassName('navbar-menu'); 

    const hours = new Date().getHours();


    //_______________ and loop through li ___________
    if (hours < 6 || hours >= 18)
        for (var i=0; i < li.length; i++) {
          li[i].style.background = 'rgb(245, 96, 96)';
        }

    else
        for (var i=0; i < li.length; i++) {
          li[i].style.background = 'rgb(96, 235, 245)';
        }
  }

  setBackgroundForTimeOfDay();
  setInterval(setBackgroundForTimeOfDay, 60000);
}

这里是您编辑过的示例：http://jsfiddle.net/gah909cd/

为什么我不能多次使用ID？

1 个答案: