Q&A
エラーメッセージや実行ログをコピー&ペーストしましょう
https://teratail.com/help/question-tips#questionTips3-4-2
題名の通りです。
jqueryのコードをjsファイルに作り
function.phpで読み込んだのですが
全く反応しませんでした。
どこが間違っているのか
あるいは別のできる方法などあれば教えて頂きたいです。
今回のコードを載せます。
header.js
(今回実装したいコードを書いたファイルです。$をjQueryに変えるなどもしたのですが駄目でした。）
var imgHeight = $('.bxslider .li').outerHeight(); //画像の高さを取得。これがイベント発火位置になる。 var header = $('.l--header'); //ヘッダーコンテンツ $(window).on('load scroll', function(){ if ($(window).scrollTop() < imgHeight) { //メインビジュアル内にいるので、クラスを外す。 header.removeClass('headerColor-default'); }else { //メインビジュアルより下までスクロールしたので、クラスを付けて色を変える header.addClass('headerColor-default'); } }); });
function.php(他の文章をコピペして名前をheaderに変えて書きました。）
//作成したJSファイルの読み込み function my_child_scripts() { wp_enqueue_script( 'menu', get_stylesheet_directory_uri() . '/lib/js/menu.js', array( 'jquery' ), '1.0.2', true ); wp_enqueue_script( 'fade-in', get_stylesheet_directory_uri() . '/lib/js/fade-in.js', array( 'jquery' ), '1.0.2', true ); wp_enqueue_script( 'loaders.css', get_stylesheet_directory_uri() . '/lib/js/loaders.css.js', array( 'jquery' ), '1.0.2', true ); wp_enqueue_script( 'slider', get_stylesheet_directory_uri() . '/lib/js/slider.js', array( 'jquery' ), '1.0.2', true ); wp_enqueue_script( 'jquery.bxslider', get_stylesheet_directory_uri() . '/lib/js/jquery.bxslider.js', array( 'jquery' ), '1.0.2', true ); wp_enqueue_script( 'header', get_stylesheet_directory_uri() . '/lib/js/header.js', array( 'jquery' ), '1.0.2', true ); } add_action( 'wp_enqueue_scripts', 'my_child_scripts' );
front-page.php(ここのbackground-imageから下に行くとヘッダーを変化させたいです。)
get_header();
1<div class="top__mv hero"> 2 <ul class="bxslider"> 3 <li style="background-image: url(/wp-content/uploads/slider1.png);"></li> 4 <li style="background-image: url(/wp-content/uploads/slider2.png);"></li> 5 <li style="background-image: url(/wp-content/uploads/slider3.png);"></li> 6 </ul> 7 <div class="inner"> 8 <p class="top__mv--text">短期間で成果が出る<br>健康的なパーソナルトレーニング</p> 9 </div> 10</div>
header.css
.headerColor-default { background-color:rgba(0, 0, 0, .8); /* （画像よりも下までスクロールした時に変えたい背景色） */ }
header.php
<body id="top" <?php body_class(); ?>> <header class="l--header" data-delighter> <div class="inner flex"> <h1 class="logo"> <a href="/"> <img src="/wp-content/uploads/logo.png" alt="ロゴ"> </a> </h1> <!--ハンバーガーボタンコード始まり--> <button type="button" id="js-buttonHamburger" class="l--header__button p--hamburger" aria-controls="global-nav" aria-expanded="false"> <span class="p--hamburger__line"> <span class="u--visuallyHidden"> メニューを開閉する </span> </span> </button> <!--ハンバーガーボタンコード終わり--> <nav class="gnav"> <div class="gnav__wrap"> <ul class="gnav__menu"> <li class="gnav__menu__item"><a href="/about/">ジムについて</a></li> <li class="gnav__menu__item"><a href="/join/">入会のご案内</a></li> <li class="gnav__menu__item"><a href="/menu/">料金メニュー</a></li> <li class="gnav__menu__item"><a href="/info/">施設案内</a></li> <li class="gnav__menu__item"><a href="/access/">アクセス</a></li> <li class="gnav__menu__item"><a href="/contact/">お問い合わせ</a></li> </ul> </div> </nav> </div> </header>
作業がここから進まず大変困っています。
長くなりましたがよろしくお願いします。
header.js のかっこの対応が合いませんが、問題ありませんか？ 実際のコードの一部でしょうか？
回答ありがとうございます。
header.jsのかっこの対応なのですがどの辺りが合わないか
教えて頂けないでしょうか？
よろしくお願いします。
最後の
});
に対応するかっこがないと思います。
確かにそうですね。
必要ないので外しましたが今のところ変わらないです。
あれ、header.js はこれで全部なのですか？
だとすると、動かないはず。
本当ですか！
何が足りないでしょうか？
一応これが全部になります。
でも、そうだとすると、JavaScriptのエラーが出てるはずなんですよね。
回答1件
0
js
1var imgHeight = $('.bxslider .li').outerHeight();
↑は↓ではありませんか？
js
1var imgHeight = $('.bxslider li').outerHeight();
また、.bxslider liの高さはどこで設定しているのかな、ということも気になりました。
投稿2020/06/03 00:44
総合スコア36078
回答ありがとうございます。
下に変更したのですが駄目でした。
高さの方はtop.cssの方に下記のように記入しています。
.top__mv .bxslider li{
height:90vh;
background:top / cover no-repeat
}
そうでしたか。
エラーメッセージなどをご提示いただけますか？
JavaScriptのエラーメッセージの見方がわからないようでしたら、その旨お知らせください。
今回の件なのですがエラーメッセージが表示されずにただ実装したい機能だけが追加されていない状況になっています。
function.phpとかだと間違えると分かりやすいエラーメッセージが出るのですがそういうのが見られないです。
なるほど。
.headerColor-default は変化していますか？ それとも全く変化しませんか？
全く変化してないです。
.headerColor-defaultの色を変えてみたりしたのですが駄目でした。
キャッシュの問題はクリアしていますか？ スーパーリロードはお試しになりましたか？
imgHeight の値をコンソールに出力すると、何かわかることがあるかもしれません。
あなたの回答
tips
プレビュー
