• tar2323

    (@tar2323)


    行き詰まってしまっておりますので質問します。

    WordPress 3.5.1です。

    ボタンを押したら特定の要素が表示・非表示されると言うものをやりたいのですが、htmlでは挙動していたものが、wordpressでは上手く動きません。

    ┏━━┓
    ┗━━┛
    btn1 btn2

    btn1 btn2をクリックすると四角で囲まれた部分にコンテンツが表示される動きをやりたいと考えております。
    クリックしても表示に切り替わらずのままで行き詰まってしまいましたので、
    ご教授頂けたらと思い、投稿致しました。

    ヘッダー部には

    <?php
    wp_deregister_script('jquery');
    wp_enqueue_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', array(), '1.7.1');
    ?>
    <script>
    jQuery(document).ready( function(){
    	jquery("#btn01").click(function(){
    		jquery("#contents2").hide();
    		jquery("#contents1").show();
    	})
    	jquery("#btn02").click(function(){
    		jquery("#contents1").hide();
    		jquery("#contents2").show();
    	})
    })
    </script>
    <?php wp_head(); ?>

    と書いております。

    実際のボタンのところは
    htmlでは<a href="javascript:void(0);" id="btn01" />
    と書いていましたが動かないので
    <input type="image" id="btn02" src="...">と書いてみたりしていますが、やはり動きません。

    jqueryの問題なのか、いまいち問題点が絞り出せておらず、苦戦しております。
    判る方おりましたらどうかよろしくお願いします。

1件の返信を表示中 - 1 - 1件目 (全1件中)
  • t.okubo

    (@tokubo)

    wp_deregister_script()でWordPressに同梱されているjQueryを無効化しているので、
    <script>タグ内でjQueryを使う場合は多分通常通り「$()」でいけると思います。

    <script>
    $(document).ready(function(){
    	$("#btn01").click(function(){
    		$("#contents2").hide();
    		$("#contents1").show();
    	})
    	$("#btn02").click(function(){
    		$("#contents1").hide();
    		$("#contents2").show();
    	})
    })
    </script>

    問題の切り分けには各ブラウザのデベロッパーツールに付属しているコンソールやDOMツリーを確認してみると良いかもしれません。Firefoxの場合はFirebugが便利です。

1件の返信を表示中 - 1 - 1件目 (全1件中)
  • トピック「画像クリックで表示・非表示の切替」には新たに返信することはできません。