スタイルではなく、選択した要素

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つの要素のみになる必要がある場合は、それを他の要素から削除する必要があります。ここ はそれを示すフィドルです：あなたはそれがどのように動作するかを見て、私は本当の:)

のコードを実行しているときにそれらを削除し、console.logsを残している

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]); 
    } 
    ); 
    } 

： fiddle with only 1 circle

違いはです

Answer 2

私が見る最初の大きな問題は、ループ用にネストされていますが、の同じイテレータ変数iを使用していることです。次のループに行く場合は、内部ループに別の変数を設定する必要があります。このような状況では、しばしば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"); 
    }); 
}