点击不工作

时间:2014-05-30 15:47:57

标签: javascript jquery html css

我的javascript.js文件包含此代码

$(document).ready(function() {$('#rabbit').click(function (e) {
    var offset = $(this).offset(),
        left = e.pageX - offset.left,
        top = e.pageY - offset.top;
    if (top > $(this).height() / 2) {
        alertDiv('You\'ve cliked under the middle.', 'alert-white');
    } else {
        alertDiv('You\'ve cliked above the middle.', 'alert-gray');
    }
        });
}); 
function alertDiv(text, cssClass) {
    var alrt = $('<div class="alert ' + cssClass + '">' + text + '</div>');
    $(document.body).append(alrt);
    alrt.click(function () {
        alrt.remove();
   });
}

在css文件中我有这个

.alert {
    position: absolute;
    left: 30px;
    top: 30px;
    width: 300px;
    height: 200px;
    border: 1px solid black;
}
.alert-white {
    background: white;
}
.alert-gray {
    background: #ccc;
}

然后最后在我的html文件中,我包含了这些

<LINK href="main.css" rel="stylesheet" type="text/css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="javascript.js"></script>  

然后最后这样做

<img src="http://www.clermontanimal.net/images/lop_rabbit_easter.jpg" id="rabbit" alt="" />

我收录了我需要的所有内容但是当我点击图片时它仍然无法正常工作。 我从这里得到了这段代码 http://jsfiddle.net/htEvT/2/

我忘了什么?

2 个答案:

答案 0 :(得分:0)

如果您正在使用file:// url,则非协议格式的url将尝试从file://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js获取文件。

使用

http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js

https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js代替。

答案 1 :(得分:-1)

尝试在头部包含jquery标记,并在正文的底部引用您的脚本。 不过不确定。你检查了控制台错误吗? 和referal应该是一样的 <script src="https:/..."></script>因为您提供的是实时网址而不是本地网址