初めてのjQuery・・・動きません

  • 解決済 yusaku

    (@yusaku)


    8年、 10ヶ月前

    jQueryを使うのは初めてです。
    『jquery.matchHeight』を使おうと、色々試したのですが、動きません。

    phpは、勉強し始めたばかりで、ほとんどわからないので、初歩的なミスによるものかもしれませんが、原因が分からず困っています。
    宜しくお願いします。

    chromeのデベロッパーツールでは、エラーは出ていません。
    テーマは「Attitude」を使っています。

    以下の手順で行いました。

    ●親テーマのディレクトリに「js」フォルダを作り、「jquery.matchHeight.js」を置きました。

    ●header.phpの<head>の下に、

    <?php wp_enqueue_script('jquery.matchHeight', get_bloginfo('template_url') . '/js/jquery.matchHeight.js',array(jquery)); ?>

    を記述しました。

    ちなみに、このすぐ後に、次のコードがきます。

    <?php	

		/**
		 * attitude_title hook
		 *
		 * HOOKED_FUNCTION_NAME PRIORITY
		 *
		 * attitude_add_meta 5
		 *
		 */
		do_action( 'attitude_title' );

		/**
		 * attitude_meta hook
		 */
		do_action( 'attitude_meta' );

		/**
		 * attitude_links hook
		 *
		 * HOOKED_FUNCTION_NAME PRIORITY
		 *
		 * attitude_add_links 10
		 * attitude_favicon 15
		 * attitude_webpageicon 20
		 *
		 */
		do_action( 'attitude_links' );

		/**
		 * This hook is important for wordpress plugins and other many things
		 */
		wp_head();
	?>

    ●</head>の直前に、以下を記述しました。

    <script type="text/javascript">
jQuery(function() {
    jQuery('.one-third syasin').matchHeight();
});
</script>

    （※動かなかったので、footer.phpの</body>直前に入れて試してみましたが、それもダメでした）

    ●固定ページ（http://okharikyuu.sunnyday.jp/tejyun.html）内の横並びしたい要素にクラス名をつけました。

    <div class=”one-third syasin”></div>

    実際のHTMLは以下のようになっています。

    <div class="one-third syasin">
[caption id="attachment_3602" align="alignnone" width="400"]<a href="http://okharikyuu.sunnyday.jp/%e5%86%99%e7%9c%9f%e3%81%a7%e8%a6%8b%e3%82%8b%e5%ae%9f%e9%9a%9b%e3%81%ae%e6%b2%bb%e7%99%82%e3%81%ae%e6%b5%81%e3%82%8c.html/attachment/dscn0075-400x300" rel="attachment wp-att-3602"><img src="http://okharikyuu.sunnyday.jp/wp/wp-content/uploads/2016/02/DSCN0075-400x300.png" alt="1 ベッドに自然に腰かけていただき、後ろからお体を診ます" width="400" height="300" class="size-full wp-image-3602" /></a> 1 ベッドに自然に腰かけていただき、後ろからお体を診ます[/caption]
</div>

<div class="one-third syasin">
[caption id="attachment_3603" align="alignnone" width="400"]<a href="http://okharikyuu.sunnyday.jp/%e5%86%99%e7%9c%9f%e3%81%a7%e8%a6%8b%e3%82%8b%e5%ae%9f%e9%9a%9b%e3%81%ae%e6%b2%bb%e7%99%82%e3%81%ae%e6%b5%81%e3%82%8c.html/attachment/dscn0076-400x300" rel="attachment wp-att-3603"><img src="http://okharikyuu.sunnyday.jp/wp/wp-content/uploads/2016/02/DSCN0076-400x300.jpg" alt="2 肩の高さの左右差、背骨のゆがみ、腰背筋の左右差などを確認します" width="400" height="300" class="size-full wp-image-3603" /></a> 2 肩の高さの左右差、背骨のゆがみ、腰背筋の左右差などを確認します[/caption]
</div>
<div class="one-third syasin">
[caption id="attachment_3604" align="alignnone" width="285"]<a href="http://okharikyuu.sunnyday.jp/%e5%86%99%e7%9c%9f%e3%81%a7%e8%a6%8b%e3%82%8b%e5%ae%9f%e9%9a%9b%e3%81%ae%e6%b2%bb%e7%99%82%e3%81%ae%e6%b5%81%e3%82%8c.html/attachment/dscn0079-400x300" rel="attachment wp-att-3604"><img src="http://okharikyuu.sunnyday.jp/wp/wp-content/uploads/2016/02/DSCN0079-400x300.jpg" alt="3 腕を回して、どのくらい回るかを診て、肩甲骨まわりの固さ、肩関節に問題がないか、肩甲骨と腕が自然に連動しているかなどを確認します" width="285" height="379" class="size-full wp-image-3604" /></a> 3 腕を回して、どのくらい回るかを診て、肩甲骨まわりの固さ、肩関節に問題がないか、肩甲骨と腕が自然に連動しているかなどを確認します[/caption]
</div>

    上記のやり方では、高さに変化はありません。
    どうぞよろしくお願いします。

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • Shoki Hirayama

    (@shokemyster)

    8年、 10ヶ月前

    <script type="text/javascript">
jQuery(function() {
    jQuery('.one-third syasin').matchHeight();
});
</script>

    3行目ですね。
    '.one-third syasin'
    だと、.one-thirdの中のsyasinという意味になってしまいますので、
    .one-thirdもしくはsyasinだけでOKです。
    （あとsyasinクラスの前のドットもミスってます）

    つまり

    <script type="text/javascript">
jQuery(function() {
    jQuery('.one-third').matchHeight();
});
</script>

    か

    <script type="text/javascript">
jQuery(function() {
    jQuery('.syasin').matchHeight();
});
</script>

    でイケるはずです。

    さぁどーでしょう。

    トピック投稿者 yusaku

    (@yusaku)

    8年、 10ヶ月前

    Shoki Hirayama様

    ご指摘ありがとうございます。
    素早くレスポンスしていただけて、大変ありがたいです。

    .one-thirdもしくはsyasinだけにすべきなのですね。
    勉強になりました。

    もう1点ご指摘いただいた、syasinクラスの前のドットのミスは、どこが間違っているか、恥ずかしながら、分かりませんでした。。

    とりあえず、教えていただいたコードを、どちらもコピペして試してみたのですが、やはり高さは変わりませんでした。

    もし、他にお気づきの点がありましたら、宜しくお願いします。

    Shoki Hirayama

    (@shokemyster)

    8年、 10ヶ月前

    再度サイトを見てみましたが、しっかりとheightは変わっていましたよ！
    あとはCSSを調整するだけです。

    こちらのCSSをどこかに入れてみてください。

    .wp-caption {
    background-color: transparent;
    border: none;
    margin:0;
}

.syasin {
    background-color: #f8f8f8;
    border: 1px solid #ccc;
    border-radius: 3px;
    height: auto;
    padding: 4px 3px 2px;
}

    また下記の

    もう1点ご指摘いただいた、syasinクラスの前のドットのミスは、どこが間違っているか、恥ずかしながら、分かりませんでした。。

    ですが、

    <script type="text/javascript">
jQuery(function() {
    jQuery('.one-third syasin').matchHeight();
});
</script>

    の3行目、本来であれば、syasinの前に.（ドット）が必要なのです。クラスですから。

    <script type="text/javascript">
jQuery(function() {
    jQuery('.one-third .syasin').matchHeight();
});
</script>

    そしてクラスを2つ並べると、.one-thirdの中の.syasinとなってしまうため、いずれかにする必要がある、ということです。

    HTMLマークアップの
    <div class="one-third syasin">
    には、2つのクラス指定されていますが、サブクラスと呼ばれるもので、jQueryで指定する時は、どちらかでOKなのでございます。

    ではGood luck

    トピック投稿者 yusaku

    (@yusaku)

    8年、 10ヶ月前

    Shoki Hirayama様

    再度の返信、ありがとうございます。
    無事、うまくいきました！！

    とてもよく分かる解説で、手とり足とり、本当にありがとうございます。
    ずっとうまくいかずに、諦めかけていたので、助かりました。
    感謝致します。

    Shoki Hirayama

    (@shokemyster)

    8年、 10ヶ月前

    良かった！
    Happy coding!

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • トピック「初めてのjQuery・・・動きません」には新たに返信することはできません。