Question

我想按类名称遍历某些DiV，并且只显示具有正确ID的那个，同时隐藏该类的所有其他DIV。

应该足够简单，但是找不到其他示例。

HTML

<div class="buttonBox">
    <input type="button" value="Veiw Profile" onclick="showSlides(\'settings\')"></input>
</div>

...

<div class="slide" id="home" style="display: inline;">
    <p>Home Page</p>
</div>
<div class="slide" id="settings">
    <p>Profile Settings</p>
</div>

JavaScript

function showSlide(s) {
   var i;
   var x = document.getElementsByClassName("slide");
   for (i = 0; i < x.length; i++) {
      if (x[i].id == s){
          x[i].style.display = "inline";
      } else {
          x[i].style.display = "none";      
      }
   }
}

编辑：目的我想要的是一系列幻灯片，这些幻灯片占了页面主体的大部分。利用各种输入时，例如按钮或字段提交（例如搜索功能）。 showSlide函数（感谢那些突出显示拼写错误的人）将隐藏所有其他幻灯片并显示相应的幻灯片。理想的结果是页面上的幻灯片区域将在不同的内容之间快速切换。

Answer 1

HTML和JavaScript中使用的函数名称不匹配。还要删除参数周围的转义符：

function showSlides(s) {
   var i;
   var x = document.getElementsByClassName("slide");
   for (i = 0; i < x.length; i++) {
      if (x[i].id == s){
          x[i].style.display = "inline";
      } else {
          x[i].style.display = "none";      
      }
   }
}

<div class="buttonBox">
    <input type="button" value="Veiw Profile" onclick="showSlides('settings')" />
</div>

<div class="slide" id="home" style="display: inline;">
    <p>Home Page</p>
</div>
<div class="slide" id="settings">
    <p>Profile Settings</p>
</div>

Answer 2

您可以使用document.querySelectorAll和:not选择器来代替其他选择。

在此示例中，它将选择类别为slide的所有div，但必须选择具有id的div。

然后在班级列表中添加hide。

还请记住，您已经删除了优先级更高的内联样式

function showSlides(s) {
  document.querySelectorAll('.slide:not(#' + s + ')').forEach(function(item) {
    item.classList.add('hide')
  })
 }

.hide {
  display: none;
}

<div class="buttonBox">
  <input type="button" value="Veiw Profile" onclick="showSlides('settings')" />
</div>
<div class="slide" id="home">
  <p>Home Page</p>
</div>
<div class="slide" id="settings">
  <p>Profile Settings</p>
</div>

关于ID的ElementsByClassName规则

2 个答案: