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

Question

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

Answer 1

有很多方法可以做到这一点。这是始终选择第一个列表的列表。替换成您想要的颜色。function swap(){&nbsp; document.querySelectorAll("ul:first-of-type li").forEach(x => x.style.backgroundColor = (x.style.backgroundColor == "black" ? "white" : "black"));};<ul>&nbsp; <li>Hi</li>&nbsp; <li>Hi</li>&nbsp; <li>Hi</li></ul><ul>&nbsp; <li>Hi</li>&nbsp; <li>Hi</li>&nbsp; <li>Hi</li></ul><button id="swap" onclick="swap()">Button</button>

Answer 2

您还可以切换一个类来反转颜色，这将是一个更短的代码并且更容易更新，您还可以使用需要变量的 function() ，因此您可以多次使用它。例子function invert(x) {&nbsp; document.querySelector(x).classList.toggle("invert")};body {&nbsp; display: flex;&nbsp; gap: 1em;&nbsp; align-items: center;&nbsp; justify-content: center;}ul {&nbsp; background: gray;}li {&nbsp; background: white;&nbsp; color: black;&nbsp; padding: 0.2em;&nbsp; margin: 0.2em;}.invert {&nbsp; filter: invert(100%);}<button type="button" onclick="invert('ul:first-of-type ')">invert first ul</button><ul>&nbsp; <li>item</li>&nbsp; <li>item</li>&nbsp; <li>item</li>&nbsp; <li>item</li>&nbsp; <li>item</li>&nbsp; <li>item</li>&nbsp; <li>item</li></ul><ul>&nbsp; <li>item</li>&nbsp; <li>item</li>&nbsp; <li>item</li>&nbsp; <li>item</li>&nbsp; <li>item</li>&nbsp; <li>item</li>&nbsp; <li>item</li></ul><button type="button" onclick="invert('ul:last-of-type ')">invert last ul</button>