web-dev-qa-db-ja.com

Uncaught TypeError:未定義のプロパティ 'replace'を読み込めません

私は同じテーマ、設定などで私のサイトの多くでこのjqueryスクリプトを使いました。

それはワードプレス創世記の子供のテーマです。

しかし、私の現在のローカルビルドでは、クラス "scroll"を持つa hrefをクリックすると、コンソールエラーが表示されます。

enter image description here 

私のapp.jsの19行目は、これまで問題があったことがないこのコードです。

$(".scroll").click(function () {
        if (location.pathname.replace(/^\//, "") === this.pathname
            .replace(/^\//, '') && location.hostname === this.hostname
        ) {
            var target = $(this.hash);
            target = target.length ? target : $("[name=" + this
                .hash.slice(1) + "]");
            if (target.length) {
                $("html, body").animate({
                    scrollTop: target.offset().top
                }, 1000);
                return false;
            }
        }
    });

私はjQuery 3.3.1を実行しています。問題の原因を特定するために、app.jsのすべてのコードをコメントアウトしました。このコードは一番上にあり、コンソールに表示されるドキュメント全体にconsole.logsを追加しました。

私はここで何をしていますか?

ありがとうございました!

1
Katie R.

WordPressでは、jQueryはnoConflictモードでロードされます。つまり、ドル記号の代わりにjQueryを使用する必要があります。

JQueryを渡して$にマップする匿名関数(厳密には任意のIIFE)でコードをラップし、これとdocument readyを組み合わせて次のようにすることができます。

jQuery(document).ready(function($) {
    // $ Works! You can test it with next line if you like
    // console.log($);
});

ドキュメントを用意しないでそれを実行することもできます(非推奨)。

(function($) {
    // $ Works! You can test it with next line if you like
    // console.log($);
})( jQuery );

詳細についてはリンクを参照してください: https://digwp.com/2011/09/using-instead-of-jquery-in-wordpress/

1
Remzi Cavdar