Question

我正在尝试让我的Javascript在我的网站上执行，现在我已经在HTML中正确地放置了代码，但是当我加载网页时它不会加载。

Here也是网站上的网站，它仍然无法查看页面底部的问题。

下面是html的顶部，展示了我如何为它编写脚本。

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>50 Project</title>
    <link rel="shortcut icon" href="http://ryankerswell.co.uk/photography/wp-content/uploads/2014/11/144-iPad-App-Icon.png">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:700,300,400,600' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
    <link rel="stylesheet" href="css/case-study.css">
    <link rel="stylesheet" href="css/before-and-after.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
    <script src="js/before-and-after.js" type="text/javascript"></script>
  </head>

这是使动画有效的before-and-after.js Javascript。

var wrapper = $("div.reveal");

wrapper.mousedown(function(e) {
    $(this).data("sliding", true);
    var offs = e.pageX - $(this).offset().left
    $(this).find('div').width(offs);
}).mousemove(function(e) {
    if ($(this).data("sliding")) {
        var offs = e.pageX - $(this).offset().left
        $(this).find('div').width(offs);
    }
});

$(document).mouseup(function(e) {
    wrapper.data("sliding", false);
})

我跟一个打字员谈过我的工作，但是它在他的机器上工作但不在我的机器上，他似乎看不出有什么问题，所以有什么不对的吗？

此外，这段代码在jsfiddle上运行正常，但在我从自己的html页面加载代码时却没有。

Answer 1

您忘记了结束)：

$(document).ready(function(e) {
   alert("it's started");
}); // <-- This was just `}`

此var wrapper = $("div.reveal");也需要在$(document).ready函数中，因为DOM尚未加载元素。例如：

$(document).ready(function(e) {
   alert("it's started");
   wrapper = $("div.reveal"); 
});

它在jsfiddle中工作的原因是因为在页面加载时执行了JS代码，正如我上面指出的那样，这不是代码的情况。 <{1}}仍然会在小提琴中起作用，因为代码在加载完所有内容之后才会运行。

Answer 2

将您的javascript代码放在脚本块中，并确保它在document.ready块中。

<script type="text/javascript">
$(document).ready(function(){
    var wrapper = $("div.reveal");

    wrapper.mousedown(function(e) {
        $(this).data("sliding", true);
        var offs = e.pageX - $(this).offset().left
        $(this).find('div').width(offs);
    }).mousemove(function(e) {
        if ($(this).data("sliding")) {
            var offs = e.pageX - $(this).offset().left
            $(this).find('div').width(offs);
        }
    });

    $(document).mouseup(function(e) {
        wrapper.data("sliding", false);
    });
});
</script>

Answer 3

好吧我发现问题，这是我在javascript中使用的代码。

var wrapper = $("div.reveal");

wrapper.mousedown(function(e) {
    $(this).data("sliding", true);
    var offs = e.pageX - $(this).offset().left
    $(this).find('div').width(offs);
}).mousemove(function(e) {
    if ($(this).data("sliding")) {
        var offs = e.pageX - $(this).offset().left
        $(this).find('div').width(offs);
    }
});

$(document).mouseup(function(e) {
    wrapper.data("sliding", false);
})

$(document).ready(function(e) {
   alert("it's started");
}

@ puddinman13提供的这段代码似乎有效。

$(document).ready(function(){
    var wrapper = $("div.reveal");

    wrapper.mousedown(function(e) {
        $(this).data("sliding", true);
        var offs = e.pageX - $(this).offset().left
        $(this).find('div').width(offs);
    }).mousemove(function(e) {
        if ($(this).data("sliding")) {
            var offs = e.pageX - $(this).offset().left
            $(this).find('div').width(offs);
        }
    });

    $(document).mouseup(function(e) {
        wrapper.data("sliding", false);
    });
});

也许我没有在开头右边添加文档就绪脚本，或者我没有正确地列出javascript，但是谢谢你现在有效。好工作的人;）

Javascript不会在网站上执行？

3 个答案: