Question

在此侧面滚动网站上有这些部分。并希望添加一个类，该类将根据您是否在特定部分而改变样式。

我正在研究此功能。顶部是确定您正在查看的侧面滚动器部分的内容。

let变量及其以下是它停止工作的地方。我正在尝试使用它，因此，如果单击非Home ID部分，例如“ slide-1”，则添加类“ nav-visibilty”。如果它们是匹配的“ slide-2”和“ slide-2”，则删除该类。我要关闭吗？

https://codepen.io/mikayp-the-styleful/pen/NWPxoXR?editors=1111

    setTimeout(function(){
      for (i=0; i < nonHome.length; i++ ){
        if (nonHome[i].id != nonHomeID){
          nonHome[i].classList.add("nav-visibility");
          console.log('add')
        } else{
          nonHomeID.classList.remove("nav-visibility");
            console.log('rem')
        }

      }

Answer 1

对于您想要的行为，我还是不太清楚，但是可以修复的代码中有两个错误：

似乎您在事件处理程序中始终使用'slide-2'而不是slideId。
如评论中所述，在比较中nonHomeID的使用不正确（它是字符串或元素，但是您在if条件下使用它就像是字符串一样），并作为else分支中的元素。）在这里，为了清楚起见，我将其保留为元素并重命名。

修复这些错误将导致将nav-visibility类应用于除按钮选择的幻灯片以外的所有幻灯片。这是理想的行为吗？

  let nonHome = document.querySelectorAll(".slide-container section");
  let nonHomeSelected = document.getElementById(slideId);

  var i;
  setTimeout(function() {
    for (i = 0; i < nonHome.length; i++) {
      if (nonHome[i] != nonHomeSelected) {
        nonHome[i].classList.add("nav-visibility");
        console.log("add");
      } else {
        nonHome[i].classList.remove("nav-visibility");
        console.log("rem");
      }
    }
  }, 1000);

编辑以添加：如果目标是仅将nav-visibility添加到所有特定的slideId中，则不应该循环添加，即需要检查幻灯片是否为循环外的家。从概念上讲，这里有两个步骤：从不再拥有该类的所有元素中删除该类，然后将该类添加到需要它的元素中。

let slideToAddVisibilityTo = document.getElementById(slideId)
let homeSlide = document.getElementById('slide-2')
let allSlides = document.querySelectorAll(".slide-container section")

for (let i = 0; i < allSlides.length; ++i)
    allSlides[i].classList.remove('nav-visiblity')

if (slideToAddVisibilityTo != homeSlide)
    slideToAddVisibilityTo.classList.add('nav-visibility')

Answer 2

只需隐藏所有内容，然后显示被点击的内容即可

function showSection(id) {
  var sections = document.getElementsByTagName("section");
  for(var i=0; i<sections.length; i++) sections[i].classList.remove("nav-visibility");

  var current = document.getElementById(id);
  current.classList.add("nav-visibility");

}

示例：showSection（“ foo”）将删除所有部分的导航可见性，然后将其添加到ID为foo的部分。

根据元素而不是其他元素删除类

2 个答案: