如何单击一个按钮并同时单击其他几个按钮？

Question

我很新，只是一个编程爱好者，所以我知道的不多。我正在构建一个网站，我需要单击一个按钮，然后单击一堆其他按钮。其他按钮点击时没有任何功能，只是更改CSS类以显示“点击”。

总而言之，我需要单击第一个按钮，然后在页面的另一侧我有 125 个按钮，我也需要显示“已单击”（不是全部 125 个，只是一些）。然后，当我“取消单击”第一个按钮时，它们也都“取消单击”。这就像仅用一个按钮即可切换某些按钮。

当我单击第一个按钮时，我尝试了任何我知道的方法来更改第二个按钮的类。我尝试过类似的方法，通过 ID 选择每个按钮：

const gridTriangleOne = document.querySelector('.gridTriangleOne');
const numberTest = document.getElementById('111');

gridTriangleOne.addEventListener('click', myFunction); 

function myFunction() {
numberTest.classList.add('active2');    
};

我尝试过这样的事情：

const gridTriangleOne = document.querySelector('.gridTriangleOne');
const triangleOne = document.querySelectorAll('.triangleOne');;

gridTriangleOne.addEventListener('click', () =>
    triangleOne.forEach(triangleOne => {
        triangleOne.classList.toggle('active');
    })
);

或者甚至是上述内容的不同变体，使用添加而不是切换。没有什么真正有效。感谢您的帮助。

Answer 1

这是最短、最有效的方法。希望这有帮助！

document.querySelector(".clickme").addEventListener("click", function() {
  const allPoorElements = document.getElementsByClassName("click");
  const hasClass = allPoorElements[0].classList.contains("clicked");
  for (let i = 0; i < allPoorElements.length; i++) {
    allPoorElements[i].classList.toggle("clicked", !hasClass);
  }
});

.clicked {background-color: #4CAF50;} .clicked, .clickme, .click { background-color: #4CAF50; border: none; color: white; padding: 16px 32px; font-size: 16px; } .clicked { background-color: lightgreen; border: none; color: black; padding: 16px 32px; font-size: 16px; }

<button class="clickme">clickme</button>

<button class="click">1</button>
<button class="click">2</button>
<button class="click">3</button>
<button class="click">4</button>

尝试不同的方法并看看哪种方法最适合您的情况总是没有坏处的。