0

jQuery の経験はあまりありませんが、Web サイトに画像スライダーを実装しようとしています。説明書を読み、適切に実装したと信じていますが、ページに移動してテストしても何もありません。jQuery が機能しない場合でも、少なくとも div は表示されるべきではありませんか? 何が問題なのかわかりません。誰かが私のコードを見て、間違いがあれば教えてもらえますか? コピー/貼り付けが面倒な外部スタイルシートがいくつかあるため、周囲のコードは含めません。ただし、必要に応じて後で対応します。

 <script src="jquery-1.10.2.js"></script>
 <script src="ion/js/ion-imageSlider/ion.imageSlider.js"></script>
 <script>
 $("#mySlider").ionImageSlider();
 </script>
 <div class="ion-image-slider" id="mySlider">
 <a href="http://farm5.staticflickr.com/4102/4911060184_6f78a83288.jpg"><img src="http://farm5.staticflickr.com/4102/4911060184_6f78a83288.jpg" data-caption="Shakespeare House" /></a>
 <a href="http://farm5.staticflickr.com/4096/4925016771_3bac794a81.jpg"><img src="http://farm5.staticflickr.com/4096/4925016771_3bac794a81.jpg" data-caption="Old site" /></a>
 <a href="http://farm5.staticflickr.com/4119/4911067626_a52a6ca492.jpg"><img src="http://farm5.staticflickr.com/4119/4911067626_a52a6ca492.jpg" data-caption="Gymga" /></a>
 </div>

前もって感謝します！

4

1 に答える 1

6

まだdocument.readyに追加されていない要素にアクセスしようとしており、アクセスする前に要素が DOM に追加されていることを確認してDOMください。

$(document).ready(function(){
     $("#mySlider").ionImageSlider();
});

JavaScript は、ページのレンダリング時にコードを実行するためのロード イベントを提供しますが、このイベントは、画像などのすべてのアセットが完全に受信されるまでトリガーされません。ほとんどの場合、スクリプトは DOM 階層が完全に構築されるとすぐに実行できます。.ready() に渡されたハンドラーは、DOM の準備が整った後に実行されることが保証されているため、これは通常、他のすべてのイベント ハンドラーをアタッチして他の jQuery コードを実行するのに最適な場所です。CSS スタイル プロパティの値に依存するスクリプトを使用する場合は、スクリプト、jQuery APIを参照する前に、外部のスタイルシートを参照するか、スタイル要素を埋め込むことが重要です。

于 2013-10-07T16:55:39.957 に答える