Question

我正在使用以下脚本，该脚本可让您检测元素何时进入和离开您的观点：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-90）生成的＃tile-220而不是＃tile-220，它可以很好地工作，只是没有我手动添加的ID。任何人都可以帮我找出我所缺少的东西吗？

非常感谢你！

Answer 1

它适用于手动添加的图块。

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

以下是代码（代码段）：

<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（tile）执行。

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

或者您可以在加载页面上的所有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添加到任何位置。

Jquery ScrollSpy - 在示例文件中工作 - 当我这样做时不起作用

1 个答案: