0

これは、動作中のjsfiddlehttp://jsfiddle.net/akshaytyagi/SD66b/へのリンクです。

以下は、自分のWebサイトで実行しようとしているコードです（jsFiddleと同じです）。

私は2台のコンピューターで試しました。私は何が間違っているのですか？

<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>
4

4 に答える 4

8

DOM要素にアクセスするスクリプトを配置して$(document).ready、要素にアクセスする前に要素の準備ができていることを確認する必要があります。

$(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>
于 2012-11-09T14:29:59.157 に答える
7

HTMLをコピーして貼り付けた後}, 3 * 1000);、特別な文字があります。

その行全体（）を削除して}, 3 * 1000);、再入力します。

見る：

ここ

andybがコメントしているように、ファイルをローカルにロードしている場合、jqueryのURLは機能しません。http：//に変更するか、ファイルをどこかにアップロードすることができます。

于 2012-11-09T14:33:23.677 に答える
1

正しい答えはすでに与えられていますが、私はあなたのマークアップを修正するために自由を取りました。また、インラインスタイルの代わりに適切な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>
于 2012-11-09T14:37:02.453 に答える
0

ローカルで機能させるための問題は、//リンクがhttp：//（src = "http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min）に解決されないことでした。 src = "// ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"）の代わりにjs

[@andybに感謝します：なぜGoogleが彼らのサイトに不適切なコードを持っているのか疑問に思いました。]

于 2012-11-09T15:03:43.717 に答える