0

我正在使用以下脚本，它允许您检测元素何时进入和离开您的视点：https ://github.com/thesmart/jquery-scrollspy

作者提供的示例效果很好，下面是它的代码：

这部分基本上创建了屏幕上的所有元素：

var body = $('body');
for (var i = 0; i < 100; ++i) {
    var element = $('<div id="tile-' + i + '" class="tile"><h2>Tile #' + i + '</h2></div>');
    body.append(element);
}

这是所有元素的样式：

.tile {
    width: 290px;
    height: 290px;
    float: left;
    border: 1px solid #999;
    margin: 4px;
}

这是检查元素何时进入和离开视点的 ScrollSpy 脚本：

$('.tile').on('scrollSpy:enter', function() {
    console.log('enter:', $(this).attr('id'));
});

$('.tile').on('scrollSpy:exit', function() {
    console.log('exit:', $(this).attr('id'));
});

$('.tile').scrollSpy();

到目前为止，一切都很好，示例文件中的所有内容都可以正常工作。现在我试图做的是手动输入我自己的元素：

<div id="tile-220" class="tile"><h2>Tile #220</h2></div>

然后使用相同的 ScrollSpy 代码，但更新以查看是否可以获得相同的结果：

$('#tile-220').on('scrollSpy:enter', function() {
    alert("test");
});

$('#tile-220').on('scrollSpy:exit', function() {
    alert("test2");
});

$('#tile-220').scrollSpy();

由于某种原因，这不起作用。现在，如果我使用由第一个脚本生成的 #tile-220 而不是 #tile-90，它会很好用，只是不用我手动添加的 ID。谁能帮我弄清楚我错过了什么？

非常感谢您！

4

1 回答 1

0

它也适用于手动添加的瓷砖。

您需要做的就是将它们添加到正确的位置。

这是代码（片段）：

<body>
<script> //Script 1
    var body = $('body');
    for (var i = 0; i < 100; ++i) {
        var element = $('<div id="tile-' + i + '" class="tile"><h2>Tile #' + i + '</h2></div>');
        body.append(element);
    }
</script>
<style>
    .tile {
        width: 290px;
        height: 290px;
        float: left;
        border: 1px solid #999;
        margin: 4px;
    }
</style>

<div id="tile-221" class="tile"><h2>Tile #221</h2></div>
<div id="tile-222" class="tile"><h2>Tile #222</h2></div>
<div id="tile-223" class="tile"><h2>Tile #223</h2></div>

<script> //Script 2
    $('.tile').on('scrollSpy:enter', function() {
        console.log('enter:', $(this).attr('id'));
    });

    $('.tile').on('scrollSpy:exit', function() {
        console.log('exit:', $(this).attr('id'));
    });

    $('.tile').scrollSpy();
</script>
</body>

如果您在脚本 2 之后添加那些新的 div，它将不起作用，因为当页面加载时，脚本 2 会为所有已加载的 div（图块）执行。

所以把你的 div 放在脚本 2 之前。

或者您可以在加载页面上的所有 div 后加载脚本 2：

<script>
$(function(){ //Addition
    $('.tile').on('scrollSpy:enter', function() {
        console.log('enter:', $(this).attr('id'));
    });

    $('.tile').on('scrollSpy:exit', function() {
        console.log('exit:', $(this).attr('id'));
    });

    $('.tile').scrollSpy();
    });
</script>

现在您可以将新的 div 放在任何地方。

于 2014-07-07T19:22:38.920 回答