Question

这是指向工作jsfiddle http://jsfiddle.net/akshaytyagi/SD66b/

的链接

以下是我试图在我的网站上运行的代码（与jsFiddle相同）

我试过两台电脑。我做错了什么？

<html>
<head>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {

var tips = [
    "creative",
    "innovative",
    "awesome",
    "amazing",
    "social"
    ];

setInterval(function() {
    var i = Math.round((Math.random()) * tips.length);
    if (i == tips.length)--i;

    $('#tip').slideUp(500, function() {
        var $this = $(this);
        $this.html(tips[i]);
        $this.toggleClass('first second');
        $this.slideDown(500);
    });

}, 3 *1000);

});
</script>
</head>

<body>
<div style=" background-position:center; background-repeat:no-repeat; background-color:#c84d5f; height:500px">
<div class="thousand">
<div style="font-size:72px; font-family:Museo; padding-top:100px; padding-left:auto; padding-right:auto; color:#FFF;">The <span id="tip">creative</span><br />brand.
</div>
</div>
</div>


</body>
</html>

Answer 1

您需要在$(document).ready中放置访问DOM元素的脚本，以确保元素在访问之前已准备就绪。

$(document).ready(function(){

})

根据评论进行编辑

更改

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

要

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2jquery.min.js"></script>

Answer 2

我复制并粘贴了您的HTML，在}, 3 * 1000);之后有一个特殊字符。

删除整行（}, 3 * 1000);）并重新输入。

请参阅：

here

正如andyb评论的那样，如果你在本地加载文件，你的jquery url就不会工作了。您可以将其更改为http：//或在某处上传文件。

Answer 3

虽然已经给出了正确答案，但我已经冒昧地修复了你的标记。我可以建议您使用适当的CSS代替内联样式吗？它使您的代码更具可读性，并将标记和设计分开，

<html><head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script>
    var tips = [
        'creative',
        'innovative',
        'awesome',
        'amazing',
        'social'
    ];

    setInterval(function() {
        var i = Math.round((Math.random()) * tips.length);
        if (i == tips.length)--i;

        $('#tip').slideUp(500, function() {
            var $this = $(this);
            $this.html(tips[i]);
            $this.toggleClass('first second');
            $this.slideDown(500);
        });
    }, 3000);
    </script>
</head><body>
    <div style="background-position:center; background-repeat:no-repeat; background-color:#c84d5f; height:500px">
        <div class="thousand">
            <div style="font-size:72px; font-family:Museo; padding-top:100px; padding-left:auto; padding-right:auto; color:#FFF;">
                The <span id="tip">creative</span><br />brand.
            </div>
        </div>
    </div>
</body></html>

Answer 4

使其在本地工作的问题是//链接无法解析为http：//（src =“http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery .min.js而不仅仅是src =“// ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js”）

[感谢@andyb：我想知道为什么谷歌在他们的网站上有不正确的代码。 ]

为什么我的javaScript不在本地或服务器上工作，而是在jsFiddle上工作

4 个答案: