jquery - 私のjqueryが機能しなくなりました

Question

.js ファイルが結果を表示しなくなったようですが、なぜ機能しなくなったのかわかりません。競合している可能性があると考えて追加したワードプレスプラグインを削除しましたが、違いはないようです。

ここで私のウェブサイトを見ることができますhttp://mhutchinson.me.uk/

ご覧のとおり、下にスクロールすると、同じ .js ファイルにある masonry スクリプトとカテゴリのテキスト置換が機能しなくなっています。

誰かが助けてくれることを願っています!

score 1 · Accepted Answer

コンソールでは、以前に指摘したように、カルーセルを呼び出そうとしている 31 行目の JS エラーが問題です。

問題は、ページが読み込まれるときにカルーセルを呼び出すことです。これは、DOM 要素として .carousel が読み込まれる前です。

JS/Jquery のベストプラクティスでは、DOM 要素に依存するすべてのコードを window.onload ハンドラーに配置するか、jquery の場合は ready を使用することを述べています。

window.onload = function(){
  $('.carousel').carousel('cycle')({
    interval: 1000
  })
}

また

$(document).ready(function(){
  $('.carousel').carousel('cycle')({
    interval: 1000
  })
})

さらに調査すると、問題は $ を使用したライブラリの競合です。jQuery.noConflict を使用する必要があります。 jQuery.noConflict

score 0 · Accepted Answer

Chrome (F12) または Firebug のコンソールを使用して、Javascript エラーを表示できます。この場合Uncaught Type Error: object is not a function、頭に追加したこのコードに関連しています。

 <script>
   $('.carousel').carousel('cycle')({
   interval: 1000
   })
 </script>

score 0 · Accepted Answer

最初にカルーセルを初期化してから、cycleメソッドをチェーンしてみてください。

$(document).ready(function () {
    $('.carousel').carousel({
        interval: 1000
    }).carousel('cycle');
});

アップデート：

ページをロードすると、次の 2 つのエラーしか表示されません。

http://mhutchinson.me.uk/wp-content/themes/twentyeleven/img/glyphicons-halflings.pngで 404 が見つかりません
https://apis.google.com/js/plusone.jsで GET が失敗します(Google +1 が AVG ブラウザー拡張機能によってブロックされているため)

が機能しcarouselなくなりました (スクリプトがページに存在しないか、外部の .js ファイルとしてページにリンクされているため)。

3 に答える 3