BinaryDevelop
  1. ホーム
  2. jquery

[解決済み] jQueryのinit関数を設定する

2022-02-10 17:04:12

質問

init()関数にこれらをセットアップし、document.readyで関数を実行させる方法を知りたいと思いました。 このコードは、別のmain.jsファイルで使用されています。 インデックス・ページから呼び出される必要があるのでしょうか？ 

$('#main_right_line_one').click(function(){
    $('#main_regular_layover, #main_deep_layover').fadeOut('slow', function(){
        $('#main_light_layover').fadeIn('slow');
    });
});

$('#main_right_line_two').click(function(){    
    $('#main_light_layover, #main_deep_layover').fadeOut('slow', function(){
        $('#main_regular_layover').fadeIn('slow');
    });
});

$('#main_right_line_three').click(function(){
    $('#main_light_layover, #main_regular_layover').fadeOut('slow', function(){
        $('#main_deep_layover').fadeIn('slow');
    });
});

どんな助けでもありがたい。 私は本当にこれを理解しようとしていますが、私の特定のコードに十分な init() を説明する良いチュートリアルを見つけることができないようです。

どのように解決するのですか？

特別なコール"は必要ありません。 <script src="yourfile.js"></script> を作成し、以下のようにコードをラップして、dom が準備できた (そして要素が存在する) 後に実行されるようにするだけです。 

$(function () {
   // your code goes here

});

$( a_function ) は $(document).ready( a_function ) についてもっと詳しく レディハンドラについては、ドキュメントを参照してください。 .

その理由 $(document).ready(...) / $(...) のような jquery の選択が全く必要ないことです。 $('#main_right_line_one') は、実行時にDOMツリー内に存在する要素のみを参照します。しかし <script> タグの内容は、通常、ブラウザが出会うとすぐに実行されます。 <script> 要素は通常 <head> . そのため、スクリプトはしばしば不完全なDOMツリーを見ることになります。現在は、jQueryの設計のおかげで、たとえ $('#main_right_line_one') がどの要素にもマッチしない場合でも、エラーは発生しません。 click ハンドラは 0 個の要素にバインドされます。

このようなコードは、すべて $(function() { ... }) これは、DOM が完全に初期化された後 (あるいは、すでに初期化されている場合は直ちに) その中のコードが実行されることを保証するものです。

のような略記があるのは、そのためです。 $(function() {}) に対して $(document).ready(function() {}) は、DOMツリーが完成してからコードを実行するという、jQueryを利用するほとんどすべてのページで必要とされるパターンです。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します