質問: あるページ(例:aaa.html)にjQueryプラグイン(今回はカルーセルパネルのslick)を設置したく、 aaa.htmlのみslickのjsファイル、cssファイルをリンクしました。 slickのメソッドは全ページにリンクしているcommon.jsに下記のように記載しました。 ``` $('.hoge').slick({ setting-name: setting-value, setting-name: setting-value, setting-name: setting-value }); ``` aaa.htmlでは問題なく動作し、デベロッパーツールのエラーもないのですが、 それ以外のページで下記のようなエラーが起こります(**は行数です) ``` common.js:** Uncaught TypeError: $(...).slick is not a function ``` なお、common.jsには他のプラグインのメソッドも記載していますが、それらはエラーがありません。 **対応策** 1. 該当するaaa.htmlの動作に影響ないのでこのまま 2. jsファイルを切り分ける。 別ファイル(plugin.jsなど)を作りslickのメソッドはそちらに記載。 プラグインを設置するページ(aaa.html等)のみplugin.jsをリンク。 3. プラグインのメソッドをcommon.jsに記載したまま、プラグインを設置しない ページでもエラーが起こらない方法? 「1.」のままにしておくのは望ましくないと思っています。 以前、別のプラグインでも同様のエラーが起こった記憶があり、 その時は「2.」の方法で切り分けました。 できれば「3.」の解決方法があると手間は減って嬉しいです。 良い対応策をご存知の方のお知恵を拝借できればと存じます。 よろしくお願いいたします。
回答: > > 「3.」 > > > `$( '.slick' ).slick()` など、slick が使用するクラスを特定しておいて、あるときだけ実行。 ``` if ( $( '.slick' ).length > 0 ) { $( '.slick' ).slick(); } // もしくは if ( $.fn.slick ) { $( '.slick' ).slick(); } ```