2016-07-01 20 views
1

要素が画面上でスクロールされるときにjqueryウェイポイントを使用しようとしています。表示する要素のname属性を取得してメニューを強調表示する必要があります。しかし、私はそれが何かをするように見えることはできません。アイテムがビューポート内にあるが、それ以外のjQueryが動作しないとき、私のコードは、現在、私は$(この)DOM要素を取得することはできないと思います。..jquery waypoints要素の名前を取得

$('.anchor-point').waypoint(
    function(){ 
     $('.side-bar li').removeClass('active'); 
     //$(this).addClass('testing'); ### this does nothing ### 
     //var name = $(this).attr('name'); 
     //alert(name); ### this alerts as undefined ### 
     alert('x'); ### this alerts "x" ### 
    } 
); 

<div class="scroller"> 
    <a name="item-01" class="heading anchor-point"></a> 
    <p> Nunc ultrices eget sem ut blandit. Etiam tempor ultricies pellentesque. Ut orci quam, rutrum ac metus eu, rhoncus condimentum enim. Nulla ex quam, vehicula vel mauris eu, tincidunt vestibulum magna. Curabitur hendrerit elit in justo interdum facilisis. Vivamus fringilla cursus justo, vitae porttitor tellus vulputate euismod. Proin laoreet faucibus finibus. In sit amet commodo ex. Sed ut sollicitudin velit, quis ultricies justo. Pellentesque sollicitudin dignissim malesuada. Duis egestas hendrerit tellus, eget lacinia elit rutrum at. Aliquam ullamcorper laoreet nisl. Integer est dui, hendrerit non massa rhoncus, vulputate ultricies dolor. Nullam vel enim quis mauris condimentum tincidunt nec sed odio. Aliquam ultricies consectetur lorem. </p> 
</div> 
<div class="scroller"> 
    <a name="item-02" class="heading anchor-point"></a> 
    <p> Nunc ultrices eget sem ut blandit. Etiam tempor ultricies pellentesque. Ut orci quam, rutrum ac metus eu, rhoncus condimentum enim. Nulla ex quam, vehicula vel mauris eu, tincidunt vestibulum magna. Curabitur hendrerit elit in justo interdum facilisis. Vivamus fringilla cursus justo, vitae porttitor tellus vulputate euismod. Proin laoreet faucibus finibus. In sit amet commodo ex. Sed ut sollicitudin velit, quis ultricies justo. Pellentesque sollicitudin dignissim malesuada. Duis egestas hendrerit tellus, eget lacinia elit rutrum at. Aliquam ullamcorper laoreet nisl. Integer est dui, hendrerit non massa rhoncus, vulputate ultricies dolor. Nullam vel enim quis mauris condimentum tincidunt nec sed odio. Aliquam ultricies consectetur lorem. </p> 
</div> 
<div class="scroller"> 
    <a name="item-03" class="heading anchor-point"></a> 
    <p> Nunc ultrices eget sem ut blandit. Etiam tempor ultricies pellentesque. Ut orci quam, rutrum ac metus eu, rhoncus condimentum enim. Nulla ex quam, vehicula vel mauris eu, tincidunt vestibulum magna. Curabitur hendrerit elit in justo interdum facilisis. Vivamus fringilla cursus justo, vitae porttitor tellus vulputate euismod. Proin laoreet faucibus finibus. In sit amet commodo ex. Sed ut sollicitudin velit, quis ultricies justo. Pellentesque sollicitudin dignissim malesuada. Duis egestas hendrerit tellus, eget lacinia elit rutrum at. Aliquam ullamcorper laoreet nisl. Integer est dui, hendrerit non massa rhoncus, vulputate ultricies dolor. Nullam vel enim quis mauris condimentum tincidunt nec sed odio. Aliquam ultricies consectetur lorem. </p> 
</div> 
+0

アラート(x)が動作している場合は、実行されていないjqueryコードを表示してください。 –

+0

これは$(this)です.addClass( 'testing'); –

+0

また、var name = $(this).attr( 'name');を試してみました。警告(名前);は未定義です –

答えて

0
$('.anchor-point').waypoint(
     var loc = this; 
     function(){ 
      $('.side-bar li').removeClass('active'); 
      $(loc).addClass('testing'); 
      alert('x'); 
     } 
    ); 

これを試してみてください..「x」を警告します。

関連する問題