使用按钮仅更改两个列表中之一的背景颜色

Question

我使用 ul、li 标签和一个按钮制作了 2 个列表。使用 JavaScript，我希望能够将每个 li 标签的背景颜色从黑色更改为白色，反之亦然，但仅限于一个列表。我怎样才能做到这一点？先感谢您。

Answer 1

有很多方法可以做到这一点。这是始终选择第一个列表的列表。替换成您想要的颜色。

function swap(){

  document.querySelectorAll("ul:first-of-type li").forEach(x => x.style.backgroundColor = (x.style.backgroundColor == "black" ? "white" : "black"));

};

<ul>

  <li>Hi</li>

  <li>Hi</li>

  <li>Hi</li>

</ul>

<ul>

  <li>Hi</li>

  <li>Hi</li>

  <li>Hi</li>

</ul>

<button id="swap" onclick="swap()">Button</button>

Answer 2

您还可以切换一个类来反转颜色，这将是一个更短的代码并且更容易更新，您还可以使用需要变量的 function() ，因此您可以多次使用它。

例子

function invert(x) {

  document.querySelector(x).classList.toggle("invert")

};

body {

  display: flex;

  gap: 1em;

  align-items: center;

  justify-content: center;

}

ul {

  background: gray;

}

li {

  background: white;

  color: black;

  padding: 0.2em;

  margin: 0.2em;

}

.invert {

  filter: invert(100%);

}

<button type="button" onclick="invert('ul:first-of-type ')">invert first ul</button>

<ul>

  <li>item</li>

  <li>item</li>

  <li>item</li>

  <li>item</li>

  <li>item</li>

  <li>item</li>

  <li>item</li>

</ul>

<ul>

  <li>item</li>

  <li>item</li>

  <li>item</li>

  <li>item</li>

  <li>item</li>

  <li>item</li>

  <li>item</li>

</ul><button type="button" onclick="invert('ul:last-of-type ')">invert last ul</button>