Javascript 删除基于元素但不基于其他元素的类_Javascript

Javascript 删除基于元素但不基于其他元素的类

javascript

Javascript 删除基于元素但不基于其他元素的类,javascript,Javascript,我在这侧滚动网站上有这些部分。并希望添加一个类，该类将根据您所在的特定区域的不同而改变样式我正在做这个函数。顶部决定您正在查看的侧滚动条的部分 let变量和以下是它停止工作的地方。我正在尝试这样做，如果单击了非主ID部分，例如“slide-1”，则添加类“nav visiblity”。如果它们与“幻灯片2”和“幻灯片2”匹配，则删除所述类。我接近了吗 setTimeout（函数（）{ 对于（i=0；i

我在这侧滚动网站上有这些部分。并希望添加一个类，该类将根据您所在的特定区域的不同而改变样式

我正在做这个函数。顶部决定您正在查看的侧滚动条的部分

let变量和以下是它停止工作的地方。我正在尝试这样做，如果单击了非主ID部分，例如“slide-1”，则添加类“nav visiblity”。如果它们与“幻灯片2”和“幻灯片2”匹配，则删除所述类。我接近了吗

setTimeout（函数（）{
对于（i=0；i

我仍然不完全清楚您想要的行为，但代码中有两个错误可以修复：

似乎您总是在事件处理程序中使用
```
'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);

只需将它们全部隐藏，然后显示单击的一个：

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");

}

功能显示部分（id）{
var sections=document.getElementsByTagName（“section”）；
对于（var i=0；我不清楚你在问什么，但一个明显的问题是，nonHomeID.classList
和id！=nonHomeID
中至少有一个是没有意义的。nonHomeID
是一个id字符串还是一个DOM元素？@FengyangWang我试图在单击时创建一个检查。我想这并不重要。nonHomeID可能是一个元素现在您已经提到了string。但是我基本上是在这个函数中创建一个if/else语句，如果所选的按钮是具有onclick=“slideTo（'slide-2'）的元素然后查找id为“slide-2”的部分，并将类添加到该部分。如果没有意义，我可以重写它。使用setTimeout
执行此操作通常不是正确的方法。您应该将代码放入click处理程序中，该处理程序将nonHomeID
@Barmar设置为不同的函数？为什么要比较id而不是只是比较元素本身？if（nonHome[i]！=nonHomeSelected）
感谢您的评论和代码。这是正确的方向，但我希望检查它是否是单击“添加”的“幻灯片-2”功能，如果不是，则删除。在设置动画后，您的代码根本不使用slideId
。如果slideId
是幻灯片-2'
，您是否打算只运行该功能的其余部分你在看我发布的代码吗？只是想确定一下。也许更多的解释会有所帮助。这是一个有5个部分的侧滚网站。非主页let是所有带有“slide-#”的部分，如果没有id='slide-2'，则有css实现。因此，主页部分是“slide-2”，如果需要，则不需要.nav可见性类这张幻灯片的焦点是点击。因此是slide.scrollIntoView。但是如果它是任何其他进入视图的部分，那么请为这些部分添加.nav可见性。希望这能提供上下文，我的思路是正确的。您好@MPortman，很抱歉继续出现混淆。我确实看到了您的coderpad，但我仍然不理解Slided是什么
应该是指。按钮的目的是聚焦特定部分吗？也就是说，如果用户单击幻灯片-1的按钮，则将导航可见性添加到幻灯片-1中，并将其从其他幻灯片中删除？当前您的代码没有这样做；它总是将导航可见性添加到除幻灯片-2之外的所有幻灯片中>。然后，如果/当它转到ID为幻灯片2的部分时，它需要再次隐藏。
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')

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");

}