jQueryの使い方について

解決済

jinchan

(@jinchan)

11年、 2ヶ月前

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

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

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

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

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

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

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

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

<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>政策１</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>政策２</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><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>政策４</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>政策５</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>政策６</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)

11年、 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>
```
別法２）：別法１）のgoogleのjquery参照位置をbody部分に変更

テーマのheader.php内の<?php wp_head();?>の前に
```
<?php
	wp_deregister_script('jquery');
?>
```
だけ、入れて、googleのjqueryの参照URは、投稿欄のテキスト欄に移して
下記コードのように書き、その後に、別法１）と同じサンプル文を入れて、
試行しましたが、やはり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)

11年、 2ヶ月前
別法３）：
下記コードの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)

11年、 2ヶ月前
自己解決！

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

１）テーマ（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を使用することとして、ｊQueryの $ 表示をそのまま生かす。

２）　動作サンプル

古籏一浩氏の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の使い方について」には新たに返信することはできません。