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

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;
	width: 8px;
	height: 8px;
	background: #5dc5ef;
	/* -moz-border-radius: 50px;
	-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 中有错误。 span 标签需要关闭。

            <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 : fiddle here

单击元素后是否需要从其他元素中删除圆圈？

如果您需要圆仅出现在 1 个元素上，则需要将其从其他元素中移除。 这是一个 fiddle ，表明: 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，所以你会看到它是如何工作的，在真正运行代码时删除它们:)