使用Waypoint的jQuery获取元素ID

Question

我正在使用jQuery Waypoints (http://imakewebthings.com/jquery-waypoints/#docs) 来检测一个元素是否在浏览器的视野中。以下是HTML代码：

<div class="container" id="container_1">1. Container</div>
<div class="container" id="container_2">2. Container</div>
<div class="container" id="container_3">3. Container</div>
<div class="container" id="container_4">4. Container</div>

这里是JS代码

$('#container_1').waypoint(function() {
     console.log("container 1 is visible");
});

这很好用！

但是有没有可能在视图中找出当前元素的id并触发waypoint？类似于这样：

$('.container').waypoint(function() {
         console.log("id of element: " + $(this).attr('id');
    });

thanks!

- miholzi

Answer 1

在 waypoints.js 中，我发现 this 指的是waypoints内部对象。但是，如果你在控制台中使用 console.log，就可以轻松地找到如何使用jquery选择该元素。

handler: function (direction){
    var DOMElement = $(this.element);
    console.log($(this.element).attr('data-id');
}

同时... 元素属性ID返回未定义

- Romain Bruckert

Answer 2

你缺少括号：) 在 console.log 结尾处，否则它将无法工作。

$('.container').waypoint(function() {
         console.log("id of element: " + $(this).attr('id'));
    });

如果你感到困惑，你也可以像这样使用：

$('.container').waypoint(function() {
    var $this = $('.container');         
    console.log("id of element: " + $this.attr('id'));
});

- Bhojendra Rauniyar