Question

我正在学习jQuery，我尝试学习的第一件事就是当我使用Waypoint插件到达页面的某个点时触发事件。

出于某种原因，我试过它不适合我。所以我决定去最基础的但仍然没有让它工作

这就是我在做什么。

HTML

<html>
    <head>
        <title>Test</title>
        <link rel="stylesheet" type="text/css" href="css/styles.css">
    </head>
    <body>
        <div class="div1">1</div>
        <div class="div2">2</div>
        <div class="div3">3</div>

        <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
        <script src="js/jquery.waypoints.min.js"></script>
        <script src="js/test.js"</script> 
    </body>
</html>

CSS

.div1 {
    height: 2000px;
    width: 200px;
    background-color: red;
}

.div2 {
    height: 200px;
    width: 200px;
    background-color: blue;
}

.div3 {
    height: 2000px;
    width: 200px;
    background-color: green;
}

和JS文件

$(document).ready(function(){
    $('.div2').waypoint(function () {
    alert('Waypoint here');    
    });
});

我想当我到达div2时会弹出一个弹出窗口，但我不知道，我也改变了对console.log的警告，看看控制台上的任何消息，但我没有收到任何消息。我不知道我做错了什么。

注意..如果我尝试在片段上复制相同的代码，它可以工作，但我不能让它在本地工作。有人可以说明我可以做错什么吗？

＆＃13;

$(document).ready(function(){
    $('.div2').waypoint(function () {
    alert('Waypoint here');    
    });
});

＆＃13;

.div1 {
    height: 2000px;
    width: 200px;
    background-color: red;
}

.div2 {
    height: 200px;
    width: 200px;
    background-color: blue;
}

.div3 {
    height: 2000px;
    width: 200px;
    background-color: green;
}

＆＃13;

        <div class="div1">1</div>
        <div class="div2">2</div>
        <div class="div3">3</div>
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/3.1.1/jquery.waypoints.min.js"></script>

＆＃13;

Answer 1

我检查了您的代码：您错过了>登录脚本标记。

 <script src="js/test.js"</script>

替换为

<script src="js/test.js"></script>

立即检查。它能解决您当地的问题吗？

jQuery waypoint根本不工作

1 个答案: