使用 querySelectorAll 更改多个元素的显示

Question

我尝试使用带有 querySelectorAll 的复选框来定位 HTML 页面中的类名称，因为getElementByID仅适用于第一个元素。并querySelectorAll显示一个nodeList。如何纠正？

let salesCheckbox = document.getElementById('sales-checkbox');
let euroSalesCurrency = document.querySelectorAll('.euro-sales-currency');
let originalSalesCurrency = document.querySelectorAll('.original-sales-currency');

if (salesCheckbox) {
    salesCheckbox.addEventListener('click', saleCheckbox);
}

//Function to close thirty
function saleCheckbox() {
    euroSalesCurrency.style.display = 'none';
    originalSalesCurrency.style.display = "block";

}

我想在用户选中复选框时显示跨度，反之亦然。

Answer 1

您需要迭代 querySelectorAll 上的每个节点。

例如：

document.querySelectorAll('.euro-sales-currency').forEach(x => x.style.display = 'none')