为什么我的 JS 函数只影响 HTML 结构中寻址的第一个元素？（更改显示属性共 class）

Question

我的 JS 函数的基本结构有效。但是，它只影响要显示和隐藏的 HTML 结构中的第一个 DIV。

CSS class“地图内容”有 none 作为显示属性。多个容器将收到此 class，因此最初将被隐藏。所有 DIV 容器都有自己的值，这在我的代码中更改显示属性.

时是必需的

这是我的功能，它基本上可以工作，但只显示和隐藏带有“map-content”的第一个容器（在 HTML 结构中）class。

function validate_3() {
    
  var x = document.getElementById("location_select");
  var y = x.options[x.selectedIndex].value;
  var a = document.querySelector(".map-content");
  var b = a.getAttribute('value');
    
  {
    if (y == b) {
        a.style.display = "block";
    } else {
        a.style.display = "none";
    }
  }
}

.map-content {
  display: none;
}

<select id="location_select" onchange="validate_3">
  <option disabled selected>Select location...</option>
  <option value="de_germany">Berlin: Germany</option>
  <option value="fr_france">Paris: France</option>
  <option value="it_italy">Rome: Italy</option>
</select>

<div class="map-content" value="de_germany">
  <h3>This is Berlin</h3>
  <p>Berlin is in Germany</p>
</div>

<div class="map-content" value="fr_france">
  <h3>This is Paris</h3>
  <p>Paris is in France</p>
</div>

<div class="map-content" value="it_italy">
  <h3>This is Rome</h3>
  <p>Rome is in Italy</p>
</div>

代码片段注意事项： 我不知道为什么，但与我的测试界面不同，none 的选择在此处起作用。甚至不是文中描述的结构中的第一个。

如果有更好的结构，我很高兴得到一般性建议。

Answer 1

你在这里缺少一组括号 onchange="validate_3"> ，像这样添加一组括号 onchange="validate_3()"> ，你的第一个选择应该有效

要获得您想要的内容，请确保您已添加括号，如上所示。

javascript,

// take this line out of your funtion and change `querySelector` to
//`querySelectorAll`
var a = document.querySelectorAll(".map-content");

function validate_3() {
    
  var x = document.getElementById("location_select");
  var y = x.options[x.selectedIndex].value;

//use The forEach() method to executes a provided function once for each
//element. 
  a.forEach((element) => {
  if (y != element.getAttribute("value")) {
  (element.classList.add("map-content"))
  } else {
  element.classList.remove("map-content")
  };
  });
};

但实际上，您最好根本不使用 onclick 并通过 Javascript 代码将事件处理程序附加到 DOM 节点。这被称为 unobtrusive javascript。

为什么我的 JS 函数只影响 HTML 结构中寻址的第一个元素？（更改显示属性共 class）

Why does my JS function only affect the first element addressed in the HTML structure? (changing display property of class)

html

javascript

css

if-statement

function

为什么我的 JS 函数只影响 HTML 结构中寻址的第一个元素？ （更改显示 属性 共 class）

Why does my JS function only affect the first element addressed in the HTML structure? (changing display property of class)

html

javascript

css

if-statement

function

为什么我的 JS 函数只影响 HTML 结构中寻址的第一个元素？（更改显示属性共 class）