サポート » 使い方全般 » jQueryの使い方について

  • 解決済 jinchan

    (@jinchan)


    いつもお世話になっております。

    投稿欄で、jQueryを使いたいと思いますが、その方法がわかりません。

    このフォーラム内の過去記事を調べたところ、

    1)WordPressでは、jQueryは設定されているので、あらためて、読み込む必要はない
    2)no conflict mode で使う必要があるので、
       $ は、jQuery に変更してプログラムを書き換えればいい

    との2点を見つけましたので、これで下記のような構成でプログラムを実行しましたが
    jQueryが動きません。

    どこがおかしいのでしょうか?ご教示いただければ幸いです。
    よろしくお願いいたします。

    なお、このプログラムは、政党別・政策別にチェックマークをつけるたびに
    その、チェックされている個数を合計して合計欄に表示するものです。

    また、通常<head></head>間に設定する
    <script type=”text/javascript” src=”js/jquery.js”></script>
    のような、jQueryの設定は、前1)により、省略しました。

    <table width="280" border="1" rules="all" style="border-collapse:collapse;">
        <tr>
          <td width="50"><div align="center">項目</div></td>
          <td width="49"><div align="center">A政党</div></td>
          <td width="49"><div align="center">B政党</div></td>
          <td width="49"><div align="center">C政党</div></td>
          <td width="49"><div align="center">D政党</div></td>
        </tr>
        <tr>
          <td>政策1</td>
          <td><div align="center"></div></td>
          <td><div align="center">
            <input type="checkbox" name="checkboxB" value="1">
          </div></td>
          <td><div align="center"></div></td>
          <td><div align="center">
            <input type="checkbox" name="checkboxD" value="1">
          </div></td>
        </tr>
        <tr>
          <td>政策2</td>
          <td><div align="center"></div></td>
          <td><div align="center"></div></td>
          <td><div align="center">
            <input type="checkbox" name="checkboxC" value="1">
          </div></td>
          <td><div align="center"></div></td>
        </tr>
        <tr>
          <td>政策3</td>
          <td><div align="center">
            <input type="checkbox" name="checkboxA" value="1">
          </div></td>
          <td><div align="center"></div></td>
          <td><div align="center"></div></td>
          <td><div align="center">
            <input type="checkbox" name="checkboxD" value="1">
          </div></td>
        </tr>
    	<tr>
          <td>政策4</td>
          <td><div align="center"></div></td>
          <td><div align="center">
            <input type="checkbox" name="checkboxB" value="1">
          </div></td>
          <td><div align="center">
            <input type="checkbox" name="checkboxC" value="1">
          </div></td>
          <td><div align="center"></div></td>
        </tr>
    	<tr>
          <td>政策5</td>
          <td><div align="center">
            <input type="checkbox" name="checkboxA" value="1">
          </div></td>
          <td><div align="center"></div></td>
          <td><div align="center"></div></td>
          <td><div align="center">
            <input type="checkbox" name="checkboxD" value="1">
          </div></td>
        </tr>
    	<tr>
          <td>政策6</td>
          <td><div align="center"></div></td>
          <td><div align="center"></div></td>
          <td><div align="center">
            <input type="checkbox" name="checkboxC" value="1">
          </div></td>
        <td><div align="center"></div></td>
        </tr>
    	<tr>
          <td>合計点</td>
          <td id="ag"></td>
          <td id="bg"></td>
          <td id="cg"></td>
          <td id="dg"></td>
        </tr>
      </table>
    
    <script>
    
    var countChecked = function() {
    	var na = jQuery("input[name='checkboxA']:checked").length;
    	jQuery( "#ag" ).html("<div align='center'>" + na + "</div>");
    
    	var nb = jQuery("input[name='checkboxB']:checked").length;
    	jQuery( "#bg" ).html("<div align='center'>" + nb + "</div>");
    
    	var nc = jQuery("input[name='checkboxC']:checked").length;
    	jQuery( "#cg" ).html("<div align='center'>" + nc + "</div>");
    
    	var nd = jQuery("input[name='checkboxD']:checked").length;
    	jQuery( "#dg" ).html("<div align='center'>" + nd + "</div>");
    };
    countChecked();
    jQuery( "input[type=checkbox]" ).on( "click", countChecked );
    
    </script>
3件の返信を表示中 - 1 - 3件目 (全3件中)
  • スレッド開始 jinchan

    (@jinchan)

    その後の試行結果のご報告
    その後、以下の2つの方法で試行しましたが、jQueryが動きませんでしたので
    ご報告します。どこがおかしいのか、おわかりの方いらっしゃいましたら
    ご教示方、よろしくお願いいたします。

    別法1):

    テーマのheader.php内の<?php wp_head();?>の前にgoogleのjqueryを使うこととして

    <?php
    	wp_deregister_script('jquery');
    	wp_enqueue_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js', array(), '1.9.0');
    ?>

    を入れて、投稿欄のテキスト欄にjQuery の次のサンプル文を
    書いてみましたが、jQueryは動作しませんでした。

    <script>
    function changeText(){
    $("#about").html("<b>軽量/高速</b>なライブラリです");
    }
    </script>
    
    <h1>jQueryサンプル</h1>
    <p id="about">jQueryとは?</p>
    <form>
    <input type="button" value="書き替え" onClick="changeText()">
    </form>

    別法2):別法1)のgoogleのjquery参照位置をbody部分に変更

    テーマのheader.php内の<?php wp_head();?>の前に

    <?php
    	wp_deregister_script('jquery');
    ?>

    だけ、入れて、googleのjqueryの参照URは、投稿欄のテキスト欄に移して
    下記コードのように書き、その後に、別法1)と同じサンプル文を入れて、
    試行しましたが、やはりjQueryは動作しませんでした。

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script>
    function changeText(){
    $("#about").html("<b>軽量/高速</b>なライブラリです");
    }
    </script>
    
    <h1>jQueryサンプル</h1>
    <p id="about">jQueryとは?</p>
    <form>
    <input type="button" value="書き替え" onClick="changeText()">
    </form>

    スレッド開始 jinchan

    (@jinchan)

    別法3):
    下記コードのhtml文をエディタでつくり、ブラウザで表示したところ、
    jQueryは、正常動作しました。ところが、これを、WordPressの投稿欄の
    テキスト欄に書くと、動作しません。よろしくお願いいたします。

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <h1>jQueryサンプル</h1>
    <p id="about">jQueryとは?</p>
    <form>
    <input type="button" value="書き替え" onClick="changeText()">
    </form>
    <script>
    function changeText(){
    $("#about").html("<b>軽量/高速</b>なライブラリです");
    }
    </script>

    スレッド開始 jinchan

    (@jinchan)

    自己解決!

    その後、WordPress3.5.1を入れなおして、XAMPP2.5の環境で実施したところ、
    うまく行きましたので、自己解決ということでご報告します。
    ただ、部分的に、例えば、divタグを使うと、WordPressで使っているため、
    画面全体に影響を与えてしまうなど、思わぬ動作をするので、注意が必要です。

    1)テーマ(twentyten)のheader.php内の

    ‘<?php if ( is_singular() && get_option( ‘thread_comments’ ) )
    wp_enqueue_script( ‘comment-reply’ );
     wp_head();
    ?>’

    の前に

    ‘<script type=”text/javascript” src=”//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js”></script>’

    を挿入して、外部のjQueryを使用することとして、jQueryの $ 表示をそのまま生かす。

    2) 動作サンプル

    古籏一浩氏のjQuery入門 (ver 1.2.6)
    (http://www.openspc2.org/JavaScript/Ajax/jQuery_study/ver1.2.6/index.html)
    から引用させていただきました。

    特定のクラスを持つエレメントへのアクセス例です。

    <script>
    function changeText(){
    $(".about").text("軽量/高速なライブラリです");
    }
    </script>
    
    <h1>jQueryサンプル</h1>
    <p class="about">jQueryとは?</p>
    <p class="about">jQueryとは?</p>
    <p>jQueryとは?</p>
    <form>
    <input type="button" value="まとめて書き替え" onClick="changeText()">
    </form>
3件の返信を表示中 - 1 - 3件目 (全3件中)
  • トピック「jQueryの使い方について」には新たに返信することはできません。