0

ヘッダーでスクリプトを使用できません。コードは次のとおりです。

<!DOCTYPE html>
<html>
<head> 

<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 <a href="javascript:void" class="sl-start">Click Here</a> 
<p class="slide" style="display: none">Something to display</p>

<script>
    $(".sl-start").click(function () {
    $(".slide").show();
    });
    </script>
</body>
</html>
4

3 に答える 3

4

次のように、コードをdocument.readyイベントハンドラーでラップします。

<!DOCTYPE html>
<html>
<head> 

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
        $(document).ready(function(){
            $(".sl-start").one('click', function () {
                $(".slide").show();
            });
        });
    </script>
</head>
<body>
 <a href="javascript:void" class="sl-start">Click Here</a> 
<p class="slide" style="display: none">Something to display</p>

</body>
</html>

そうしないと、要素が存在する前にスクリプトが実行されます。

于 2012-08-21T13:09:19.443 に答える
0

DOMは、イベントをアタッチするためのヘッドでまだ準備ができていないためです。

documentのreadyイベントが発生したときに実行すると、次のように機能します。

$(document).ready(function(){
    $(".sl-start").click(function () {
        $(".slide").show();
    });
});
于 2012-08-21T13:09:32.113 に答える
0

<head>領域で使用する場合は、$（document）.ready（）イベントを使用する必要があります。

<script type="text/JavaScript">
    $(document).ready(function() {
        $(".sl-start").click(function () {
            $(".slide").show();
        });
    });
</script>

または速記：

$(function() {
    ...
});

$（document）.ready（）イベントは、HTML/CSSドキュメントが読み取られた後にトリガーされるためです。つまり、ブラウザはHTMLドキュメントの完全なコンテンツと構造をすでに認識しています。

そうしないと、HTML構造が利用できない（まだ完全に読み取られていない）ため、jQuery呼び出しでオブジェクトを見つけることができません。

于 2012-08-21T13:09:50.350 に答える