2016-10-12 12 views
0

我試圖編寫一個活動鏈接狀態滾動每節。如何獲得每個鏈接的散列?

我想要獲得鏈接的散列。我現在的代碼是爲這行'console.log($(this).eq(i).hash);'正在返回'未定義'。

感謝

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>Scroll</title> 
     <style media="screen"> 
      body, html { 
       padding: 0; 
       margin: 0; 
      } 
      section { 
       padding: 6rem; 
       text-align: center; 
      } 
      section:nth-child(1) { 
       background: orangered; 
      } 
      section:nth-child(2) { 
       background: steelblue; 
      } 
      section:nth-child(3) { 
       background: orange; 
      } 
      section:nth-child(4) { 
       background: purple; 
      } 
      section:nth-child(5) { 
       background: red; 
      } 
      section:nth-child(6) { 
       background: black; 
       color: #fff; 
      } 

      nav { 
       background: black; 
       color: #fff; 
       padding: 2rem 0; 
       text-align: center; 
       position: fixed; 
       top: 0; 
       width: 100%; 
      } 

      ul { 
       display: inline-block; 
      } 

      ul > li { 
       display: inline-block; 
       padding-right: 5px; 
      } 

      .active { 
       background: grey!important; 
      } 
     </style> 
    </head> 
    <body> 
     <nav> 
      <ul> 
       <a href="#section1">Section 1</a> 
       <a href="#section2">Section 2</a> 
       <a href="#section3">Section 3</a> 
       <a href="#section4">Section 4</a> 
       <a href="#section5">Section 5</a> 
       <a href="#section6">Section 6</a> 
      </ul> 
     </nav> 
     <section> 
      <h2 id="section1">Section 1</h2> 
     </section> 
     <section> 
      <h2 id="section2">Section 2</h2> 
     </section> 
     <section> 
      <h2 id="section3">Section 3</h2> 
     </section> 
     <section> 
      <h2 id="section4">Section 4</h2> 
     </section> 
     <section> 
      <h2 id="section5">Section 5</h2> 
     </section> 
     <section> 
      <h2 id="section6">Section 6</h2> 
     </section> 
     <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> 
     <script type="text/javascript"> 
     $("a[href^='#']").each(function(i){ 
      console.log($(this).eq(i).hash); 
     }); 
      $(window).scroll(function(){ 
       $("section").each(function(i){ 
        if($(document).scrollTop() >= $("section").eq(i).offset().top) { 
         $("section").eq(i).addClass("active"); 
        } else { 
         $("section").eq(i).removeClass("active"); 
        } 
       }); 
      }); 
     </script> 
    </body> 
</html> 
+0

嘗試' this.hash'。 –

回答

2

jQuery對象沒有一個hash屬性,底層的DOM元素確實

而不是

$(this).eq(i).hash 

嘗試

this.hash 
+0

這是最好的答案,並且比標記的副本更好。另外如果你想擺脫#,'this.hash.slice(1);' – Keith

+0

這工作表示感謝。我怎麼知道它是jQuery的obj還是DOM的? –

+0

@JoeConsterdine包含在$()中的任何東西都會返回一個jQuery對象,它在內部包含對匹配元素的引用 – charlietfl