Javascript 获得；“未定义”不是一个函数；使用jQuery冲突时_Javascript_Jquery_Collision Detection_Collision

Javascript 获得；“未定义”不是一个函数；使用jQuery冲突时

javascript jquery

Javascript 获得；“未定义”不是一个函数；使用jQuery冲突时,javascript,jquery,collision-detection,collision,Javascript,Jquery,Collision Detection,Collision,（我试图基于实现jQuery碰撞，但也许我应该继续尝试使用第一个建议，使用边界框计算？我还没有尝试过。）在尝试使用jQuery collision提供的“.collision（）”函数时，我似乎遇到了错误（在Chrome中）“undefined不是一个函数” 我不知道所有的代码张贴，所以请让我知道如果需要更多的信息。试图理解jquery-collision.js中正在发生的一切超出了我目前的理解水平 jquery-1.8.3.min pastebin（dot）com/tJmM97EQ jque

（我试图基于实现jQuery碰撞，但也许我应该继续尝试使用第一个建议，使用边界框计算？我还没有尝试过。）

在尝试使用jQuery collision提供的“.collision（）”函数时，我似乎遇到了错误（在Chrome中）“undefined不是一个函数”

我不知道所有的代码张贴，所以请让我知道如果需要更多的信息。试图理解jquery-collision.js中正在发生的一切超出了我目前的理解水平

jquery-1.8.3.min pastebin（dot）com/tJmM97EQ

jquery冲突pastebin（dot）com/7JS2WNVr

HTML:

<head>

<!--js-collisions-->
<script type="text/javascript" src="javascript/collision/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="javascript/collision/jquery-collision.js"></script>

<!--js-general-->
<script type="text/javascript" src="javascript/jquery-1.11.1.js"></script>
<script type="text/javascript" src="javascript/script.js"></script>
<script type="text/javascript" src="javascript/jquery.easing.1.3.js"></script>

<!--css-->
<link href="css/hover/css/hover.css" rel="stylesheet" media="all">
<link rel="stylesheet" type="text/css" href="css/style.css">

</head>

<body id="home">

    <div class="container">
        <p>Website content here</p>
    </div>

    <div class="footer">
        <!--css-tricks.com/fighting-the-space-between-inline-block-elements/-->
        <div class="link" id="portfolio">
        </div>

        <div class="link" id="hamumu">
        </div>

        <div class="link" id="beep">
        </div>

        <div class="link" id="jk">
        </div>

        <span class="stretch"></span>
    </div>

</body>

* {
    margin: 0;
}

body#home {
    background-color: green;
}

html, body {
    height: 100%;
}

.container{
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -125px;
}

.footer{
    margin-left: auto;
    margin-right: auto;
    height: 125px;
    width: 70%;
    background-color: red;
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
}

.link {
    position: relative;
    width: 40px;
    height: 40px;
    vertical-align: top;
    display: inline-block;
    *display: inline;
    top: -300px;
    zoom: 1;
}

.smoke{
    position: relative;
    top: 20px;
    left: -20px;
    width: 80px;
    height: 80px;
    background-color: gray;
}

/*link specs*/
#portfolio {
    background-color: yellow;
}

#hamumu {
    background-color: pink;
}

#beep {
    background-color: orange;
}

#jk {
    background-color: purple;
}

.stretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0;
}

#port1 {
    position: relative;
    top: 0px;
    margin-left: auto;
    margin-right: auto;
    width: 40px;
    height: 40px;
    background-color: blue;
}

var links = ["#portfolio", "#hamumu", "#beep", "#jk"];
var linkCollision = null;

$(document).ready(function() {

    //if on home page
    if ($("body#home").length > 0) {
          homePage();
    }

});

//home page function
function homePage() {


    for (var i=0; i<links.length; i++) {

        linkCollision = $(links[i]);
        collisionCheck();

        $(links[i]).animate({

            top: '0'

        }, 1000*(Math.random()*(1.5-1)+1), 'easeOutBounce', function(){

        });

    }

}

function collisionCheck() {
    var link = "#portfolio";
    var footer = ".footer";
    var hits = $(footer).collision(link);

    for (var i=0; i<hits.length; i++) {
        alert("dld");
    }

}

JS:

<head>

<!--js-collisions-->
<script type="text/javascript" src="javascript/collision/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="javascript/collision/jquery-collision.js"></script>

<!--js-general-->
<script type="text/javascript" src="javascript/jquery-1.11.1.js"></script>
<script type="text/javascript" src="javascript/script.js"></script>
<script type="text/javascript" src="javascript/jquery.easing.1.3.js"></script>

<!--css-->
<link href="css/hover/css/hover.css" rel="stylesheet" media="all">
<link rel="stylesheet" type="text/css" href="css/style.css">

</head>

<body id="home">

    <div class="container">
        <p>Website content here</p>
    </div>

    <div class="footer">
        <!--css-tricks.com/fighting-the-space-between-inline-block-elements/-->
        <div class="link" id="portfolio">
        </div>

        <div class="link" id="hamumu">
        </div>

        <div class="link" id="beep">
        </div>

        <div class="link" id="jk">
        </div>

        <span class="stretch"></span>
    </div>

</body>

* {
    margin: 0;
}

body#home {
    background-color: green;
}

html, body {
    height: 100%;
}

.container{
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -125px;
}

.footer{
    margin-left: auto;
    margin-right: auto;
    height: 125px;
    width: 70%;
    background-color: red;
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
}

.link {
    position: relative;
    width: 40px;
    height: 40px;
    vertical-align: top;
    display: inline-block;
    *display: inline;
    top: -300px;
    zoom: 1;
}

.smoke{
    position: relative;
    top: 20px;
    left: -20px;
    width: 80px;
    height: 80px;
    background-color: gray;
}

/*link specs*/
#portfolio {
    background-color: yellow;
}

#hamumu {
    background-color: pink;
}

#beep {
    background-color: orange;
}

#jk {
    background-color: purple;
}

.stretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0;
}

#port1 {
    position: relative;
    top: 0px;
    margin-left: auto;
    margin-right: auto;
    width: 40px;
    height: 40px;
    background-color: blue;
}

var links = ["#portfolio", "#hamumu", "#beep", "#jk"];
var linkCollision = null;

$(document).ready(function() {

    //if on home page
    if ($("body#home").length > 0) {
          homePage();
    }

});

//home page function
function homePage() {


    for (var i=0; i<links.length; i++) {

        linkCollision = $(links[i]);
        collisionCheck();

        $(links[i]).animate({

            top: '0'

        }, 1000*(Math.random()*(1.5-1)+1), 'easeOutBounce', function(){

        });

    }

}

function collisionCheck() {
    var link = "#portfolio";
    var footer = ".footer";
    var hits = $(footer).collision(link);

    for (var i=0; i<hits.length; i++) {
        alert("dld");
    }

}

var links=[“#portfolio”、“#hamumu”、“#beep”、“#jk”]；
var linkCollision=null；
$（文档）.ready（函数（）{
//如果在主页上
如果（$（“正文#主页”）。长度>0）{
主页（）；
}
});
//主页功能
功能主页（）{
对于（var i=0；i您正在覆盖调用另一版本jquery的jquery
// Here you call jquery
<script type="text/javascript" src="javascript/collision/jquery-1.8.3.min.js"></script>
// Here you call a jquery plugin that extends the jquery object
<script type="text/javascript" src="javascript/collision/jquery-collision.js"></script>

<!--js-general-->
// Here you call jquery again, wiping out the existing and extended jquery you had
<script type="text/javascript" src="javascript/jquery-1.11.1.js"></script>
// BOOM, you got a error...
<script type="text/javascript" src="javascript/script.js"></script>
<script type="text/javascript" src="javascript/jquery.easing.1.3.js"></script>

//这里您调用jquery
//在这里，您可以调用扩展jquery对象的jquery插件
//在这里，您再次调用jquery，删除了现有的和扩展的jquery
//砰，你搞错了。。。
您不应该包含两个不同版本的jQuery。您是否正在尝试加载两个不同版本的jQuery？（编辑：@b1j击败我）啊，好的。我认为1.8.3有一些特别重要的东西，我想要执行的各种任务都需要这两个版本。我感谢你的帮助！如果可能的话，我可以使用更多的帮助：SourceForge jQ Collision Wiki页面说“基本用法返回碰撞器遇到的障碍”，并提供此示例：var colliders_-selector=“.collider”var障碍物_-selector=“.barriend”var hits=$（碰撞器_-selector）.碰撞（障碍物_-selector）
我想知道如何利用返回的信息，例如，在发生冲突时显示警报消息。或者如何发送返回的信息以用于函数？