2012-04-26 7 views
2

ナビゲーションバーを通過するこのjqueryコードがあり、選択したリンクの周りにボックスがあります。これは中間のリンクでのみ動作し、他のリンクでは動作しません。何か案は?前もって感謝します。未知の型の取得エラー:jsのヌルのプロパティ 'left'を読み取ることができません

$el = $('#nav').children('li.current'); 

$エルは空のjQueryオブジェクトは、次のとおりです。

navigation arrow starts 
var $el, leftPos, newWidth, 
    $mainNav = $("#nav"); 

$mainNav.append("<li id='magic-line'></li>"); 
var $magicLine = $("#magic-line"); 

$magicLine 
    .width($(".current_page_item").width()) 
    .css("left", $(".current_page_item a").position().left) 
    .data("origLeft", $magicLine.position().left) 
    .data("origWidth", $magicLine.width()); 

//scroll arrow 

function update_location(){ 
    $el = $('#nav').children('li.current'); 
    leftPos = $el.position().left; 
    newWidth = $el.width(); 
    $('#nav li:nth-child(4) a').addClass('button-style'); 
    if(window.top.scrollY == 0) 
    { 
     setTimeout(function(){ 
     $magicLine.stop().animate({ 
      left: 8, 
      width: 355 
     });},1000); 
     $('#nav li:nth-child(4) a').removeClass('button-style'); 

    } 
    else 
    { 
     setTimeout(function(){ 
     $magicLine.stop().animate({ 
      left: leftPos, 
      width: newWidth 
     });},1000); 
    } 
} 

$('#magic-line').css('left', '-15px', 'width','411px'); 
$(window).scroll(function(){ 
    update_location(); 
}); 

    <div class="navbar-fixed-top navbar" > 
    <div class="navbar-inner"> 
     <div class="container"> 
      <ul class="nav nav-pills pull-right" id="nav"> 
       <li class="current_page_item" style="width: 355px;"><a href="#home" class="logo" style="display:block; width: 355px;"><img src="images/logo.jpg" class="current_page_item" width="355" alt="" /></a></li> 
       <li><a href="#vision">VISION</a></li> 
       <li><a href="#services">SCHOOLS</a></li> 
       <li><a href="#apply">REQUEST AN EVALUATION</a></li> 
       <li><a href="#how-it-works">HOW IT WORKS</a></li> 
       <li><a href="#contact-us">CONTACT US</a></li> 
      </ul> 
     </div> 
    </div> 
</div> 

function update_location()

+3

問題は、 '$エル= $( '#のNAV')ということである子ども( 'li.current');'ゼロ要素が含まれています。したがって、 '.position()'は 'null'であり、あなたのエラーが観察されます。別の注記:**変数の宣言について聞いたことがある**?すべての 'var'接頭辞が省略されると、変数はグローバルスコープで定義されます。 –

+0

私はそれがnullであることを理解していますが、なぜそれがnullですか? –

+0

これは['jQuery.fn.position'(source)](http://james.padolsey.com/jquery/#v=git&fn=jQuery.fn.position)で定義された動作です:' if(!this [0 ]){return null;} ' - 要素がない場合、' null'が返されます。 –

答えて

2

leftPos = $el.position().left;後のエラーを取得する私はあなたがこの行に現在の代わりにクラスcurrent_page_itemを使用することを意味するかもしれないと思いますしたがって、el.position()はnullなので、nullのプロパティleftを読み取ることはできません。

+0

currentをcurrent_page_itemに置き換えましたが、まだ変更されていません。しかし、エラーはなくなりました。 –

+0

それはループスルーするときのように、中間のリンクにのみ「ボタンスタイル」を割り当て、それを取り除いて別のリンクに割り当てることはありません。 –

1

ザッツ理由:

$el = $('#nav').children('li.current'); 

リターンはnull。

試してみてください。

$el = $('#nav').children('li.current_page_item'); 
関連する問題