样式被添加到最后一个子元素的集合中，而不是所选元素的最后一个子

Question

var NavLinks = document.querySelectorAll('.nav-link'); 
 
var circuses = document.querySelectorAll('.circle'); 
 

 

 
for (var i = 0; i < NavLinks.length; i++) { 
 
    var navLink = NavLinks[i]; 
 
    navLink.addEventListener('click', function() {  
 
     for (var i = 0; i < circuses.length; i++) { 
 
      var circle = circuses[i]; 
 
      circle.style.display='none'; 
 
     } 
 
     var theLastChild = navLink.lastChild; 
 
     theLastChild.style.display='block'; 
 
     
 
    } 
 
    ); 
 
    }

.nav-container{ 
 
    height: 10px; 
 
    background: white; 
 
    padding: 30px 0px 40px 0px; 
 
    margin-left: 18%; 
 
    margin-right: 18%;  
 
} 
 
.nav-body ul{ 
 
    text-align: right; 
 
} 
 
.nav-body ul li{ 
 
    display: inline- block; 
 
    float: left; 
 
    margin-right: 30px;  
 
} 
 
#logo{ 
 
    margin-right: 0px; 
 
} 
 
.nav-body ul li{ 
 
    line-height: 0.6; 
 
} 
 
#logo{  
 
    margin-top: -10px; 
 
} 
 
#logo-light-blue{ 
 
    color: #5dc5ef; 
 
    font-weight: 900; 
 
} 
 
#logo-dark-blue{ 
 
    color: #1885c8; 
 
    font-weight: 900; 
 
} 
 
.circle { 
 
    display: none; 
 
\t width: 8px; 
 
\t height: 8px; 
 
\t background: #5dc5ef; 
 
\t /* -moz-border-radius: 50px; 
 
\t -webkit-border-radius: 50px; */ 
 
    border-radius: 4px; 
 
    margin: auto; 
 
    margin-top: 7px; 
 
}

<header class="nav-container"> 
 
     <nav class="nav-body"> 
 
      <ul> 
 
       <li class="nav-link"><a href="#">צור קשר</a> 
 
       <div class="circle"></div></li> 
 
       <li class="nav-link"><a href="#">המלצות ומאמרים</a> 
 
        <div class="circle"></div></li> 
 
       <li class="nav-link"><a href="#">שאלות נפוצות</a> 
 
        <div class="circle"></div></li> 
 
       <li class="nav-link"><a href="#">אודות ד"ר שי מרון אלדר</a> 
 
        <div class="circle"></div></li> 
 
       <li class="nav-link"><a href="#">אודות ההליכים</a> 
 
        <div class="circle"></div></li> 
 
       <li class="nav-link"><a href="#">ראשי</a> 
 
        <div class="circle"></div></li> 
 
       <li id="logo"> <h3> <span id="logo-light-blue"> ד"ר </span><span id="logo-dark-blue"> שי מרון אלדר </span></h3><br> 
 
         <h6> פתרונות כירורגיים להשמנת יתר וניתוחים זעיר פולשניים</h6></li> 
 
      </ul> 
 
     </nav> 
 
    </header>

我需要做的是类别菜单下一个蓝色的圆圈，这是我压。但现在蓝色圆圈只添加到最后一个菜单类别。无论哪一个被按下，都无关紧要。 我正在寻找被按下的菜单类别的最后一个孩子。但它显示了我每次所有菜单类别的最后一个孩子。 有什么不对？

>

Answer 1

您在HTML错误。跨度标签需要关闭。

  <li id="logo"> 
       <h3> 
       <span id="logo-light-blue"> ד"ר </span> 
       <span id="logo-dark-blue"> שי מרון אלדר </span> 
       </h3> 
       <br> 
       <h6> פתרונות כירורגיים להשמנת יתר וניתוחים זעיר פולשניים</h6> 
      </li> 

而Id属性应该是唯一的元素，你重复的圆作为一个Id遍布整个地方。

<div id="circle"></div></li> 

它没有解决它，尝试更好地解释问题，因为即使在演示中你已经把结果放在了所有的地方。我们是否缺少一些CSS或样式库？

编辑：我想我知道你想要什么，是这样吗？看看小提琴： fiddle here

一旦你点击你的元素，你需要从其他元素中删除圆圈吗？

如果您需要的圆只在1个元素上，则需要将其从其他元素中移除。 下面是一个小提琴表明： fiddle with only 1 circle

的区别是：

var NavLinks = document.querySelectorAll('.nav-link'); 

for (var i = 0; i < NavLinks.length; i++) { 
    var navLink = NavLinks[i]; 
    navLink.addEventListener('click', function (event) { 
      var allNavs = document.querySelectorAll('.nav-link div'); 
     for (var it = 0; it < allNavs.length; it++){ 
      console.log(allNavs[it]); 
      allNavs[it].classList.add('invisible'); 
      allNavs[it].classList.remove('circleVisible'); 
     } 
     console.log(allNavs); 
      var targetElement = event.target || event.srcElement; 
     var circleDiv = targetElement.parentNode.querySelectorAll('div'); 
     console.log(circleDiv[0]); 
     circleDiv[0].classList.add('circleVisible'); 
     circleDiv[0].classList.remove('invisible'); 
     console.log(circleDiv[0]); 
    } 
    ); 
    } 

我已经离开console.logs，所以你看到它是如何工作的，真正运行的代码时将其删除:)

Answer 2

我看到的第一个大问题是你嵌套for循环，但使用相同的迭代变量我。如果你要接下来的循环，你需要内部循环有一个不同的变量。在这样的情况下，我会经常使用ii，因为它很简单。

此外，你似乎是以迂回的方式做到这一点。我不完全确定你需要什么，但如果看起来如此，那么这个解决方案就更简单了。

CSS

.circle { 
    display: none; 
    ... other attributes 
} 

.active-menu-item > .circle { 
    display: block; 
} 

的JavaScript

var NavLinks = document.querySelectorAll('.nav-link'); 

for (var i = 0; i < NavLinks.length; i++) { 
    var navLink = NavLinks[i]; 
    navLink.addEventListener('click', function() {  
     for (var ii = 0; ii < NavLinks.length; ii++) { 
      NavLinks[ii].classList.remove("active-menu-item"); 
     } 
     navLink.classList.add("active-menu-item"); 
    }); 
}