javascript 如何将同一个classList.remove函数应用于多个不同的ID

s2j5cfk0  于 2023-03-16  发布在  Java
关注(0)|答案(1)|浏览(142)

我对编程很陌生,正在尝试创建一个基于文本的rpg。现在我有多个函数根据不同的div元素的ID来切换它们的可见性。我不能让它们都有相同的ID,否则当他们点击开始按钮时,整个故事的所有选择都会显示给他们。我可以只创建一个函数,只在调用的ID上执行吗?任何帮助或资源,以了解如何理解您的答案将是惊人的!谢谢

eqqqjvef

eqqqjvef1#

关于:

  • 我不能让他们都有相同的身份 *

无论如何,不能在HTML页面中重用ID。文档中的每个ID都必须是唯一的。您总是可以为每个元素添加类或数据属性,以便在批处理操作中对它们进行逻辑分组。

输入、文档、查询选择全部

您可以在选择器(ID)列表中进行选择:

document.querySelectorAll('#btn-1, #btn-2, #btn-3, #btn-4, #btn-5')
  .forEach(btn => {
    btn.classList.remove('remove-me');
  });
.remove-me { background: red; }
<button id="btn-1" class="remove-me">Button #1</button>
<button id="btn-2" class="remove-me">Button #1</button>
<button id="btn-3" class="remove-me">Button #1</button>
<button id="btn-4" class="remove-me">Button #1</button>
<button id="btn-5" class="remove-me">Button #1</button>

或者,您可以按类别选择:
一个一个三个一个一个一个一个一个四个一个一个一个一个一个五个一个
或者,通过数据属性:

document.querySelectorAll('[data-special-button]')
  .forEach(btn => {
    btn.classList.remove('remove-me');
  });
.remove-me { background: red; }
<button id="btn-1" class="remove-me" data-special-button>Button #1</button>
<button id="btn-2" class="remove-me" data-special-button>Button #1</button>
<button id="btn-3" class="remove-me" data-special-button>Button #1</button>
<button id="btn-4" class="remove-me" data-special-button>Button #1</button>
<button id="btn-5" class="remove-me" data-special-button>Button #1</button>

相关问题