0

ユーザーがページに入ると、div を中央に配置して見出しを付け、その下にある引用をリストからランダムに選択し、サイトに入るボタンを付けたいと思います。これはすべて問題ありませんが、ボタンをメインサイトにフェードインさせ、ランディング div をフェードアウトさせることができないようです。これは、物事をより詳しく説明するための jsfiddle です。

JSFIDDLE

お気づきかもしれませんが、私は JavaScript や jquery があまり得意ではありません。これまでに行ったことは、コードの例を通して少しずつ学び、Web をサーフィンすることです。

私がやりたいことの単純化されたバージョンでjsfiddleで遊んで、それがうまくいったので、なぜそれがうまくいかないのかわかりません。

簡易版

以下のコードは簡易版です (コードを追加しないと投稿できませんか?)

HTML

<div class="landingDiv">
    <h1>LANDING DIV</h1>
    <button id="showMain">Enter Site</button>
</div>

<div class="main">
    <h1>Main Site</h1>
</div>

Jクエリ

$("#showMain").click(function () {
    $(".main").fadeIn(1000);
    $(".landingDiv").fadeOut(1000);
});

CSS

.main {
display: none;
opactiy: 0;
}

ありがとうございます。

スティーブ。

4

3 に答える 3

0

フィドルの問題は、jQuery を追加していないため、「$」で参照しようとすると、javascript エラーがスローされることです。jQuery ライブラリへの参照を追加するだけで、クリックするとフィドルが機能してボタンがフェードアウトします。

于 2013-05-15T02:09:24.480 に答える
0

最初の jQuery の例ではエラーがスローされました。

$ is not defined

jQueryが定義されていない/含まれていないことを意味します。そうではありませんでした。しかし、2 番目の jsFiddle には jQuery が含まれています。

jsfiddle の左側の「Framewords & Extensions」という見出しの下に、Framewordk を含めることができることがわかります。つまり、jQuery を含めます。

jQueryが含まれている更新されたフィドルは次のとおりです：http://jsfiddle.net/6cGHF/1/

JavaScript の開発を進めていく中で、予期しないことが起こった場合は、ブラウザーの開発者ツールのエラーをチェックすることをお勧めします。常に役に立ちます。StackOverflow で質問するときは、これらのエラーを提供してください。:)

Chrome の開発者ツールのショートカットは F12 です。エラーがある場合は、X が入った小さな赤い円が表示されます。クリックすると詳細が表示されます。ただし、開発者ツールは他の主要なブラウザーでも利用できます (IE8 以下を除く)。

編集：

イベントclick()関数を$(document).ready()

$(document).ready(function() {
    $("#showMain").click(function () {
        $(".main").fadeIn(1000);
        $(".landingDiv").fadeOut(1000);
    });
});

何が起こっていたかというと、HTML ファイルが上から下に読み取られるということです。したがって、要素が読み取らclickれる前に関数に到達したことになります。#showMainしたがって、jQuery はそれを見つけることができませんでした。

これが jsFiddle で問題にならなかった理由は、すべての JavaScript コードが「onLoad」関数 (これは確かに とは少し異なります$(document).ready()) でラップされていたためです。読み込まれました。上でリンクしたフィドルの左側に、「onLoad」が選択されたドロップダウンがあることがわかります。その中で、「OnDomready」を選択することもできます（これは と同等です$(document).ready()）

要約すれば：

  • jsFiddleでは使用$(document).ready()しないでください。あなたはそれを必要としません。
  • $(document).ready()DOM の準備ができているという事実に依存する JavaScript を使用しないでください(つまり、「すべてのコンテンツが JavaScript に表示される」)。
于 2013-05-15T02:09:37.717 に答える