人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

jQueryのバージョンによる表示結果の変化について

今回、jQueryのバージョンの変化によって表示が変わってしまう現象を解決したく質問いたします。
以下のURLアドレスのサンプルをご覧いただければと思います。
http://kotenbu.sakura.ne.jp/index1.html (jQuery1.4.4)
http://kotenbu.sakura.ne.jp/index2.html (jQuery1.5.2)

サンプルでは、jQuery1.4.4と1.5.2バージョンを使っています。

今回、jQuery1.5.2のページで正規表現を使用して、「表示」ラジオボタンをクリックすると「jQuery1.5」という文字列が表示されるページを作りたいと思っております。
このサンプルでjQuery1.4バージョンだとうまく表示されるのですが、jQuery1.5バージョンでもうまく表示される方法はありますでしょうか?
回答のソースを教えていただければと思います。
また、この現象の原因を教えていただれると幸いです。

どうぞよろしくお願いいたします。

●質問者: nagato-yuki
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● a-kuma3
●50ポイント

ラジオボタンの name 属性に入ってるアスタリスクでエラーになってます。
name="radio_state_1*1" を、name="radio_state_1x1" のように、アスタリスクを使わないようにすれば、期待道理になると思います。



【追記】
もともとアスタリスクは、規格上、name や id 属性には使えない文字です。
http://www.w3.org/TR/REC-html40/types.html#type-name

なので、jQuery 1.4.4 で動作しているのがたまたま で、jQuery 1.5.2 で動作しない(エラーが出ます)のは、規格上、当然です。
その上で、無理矢理、動作するように変更するとしたら、jQuery を使うことのメリット(シンプルに書ける)を殺すことになります。
それを踏まえたうえで、以下のような感じにすれば、1.5.2 でも動作します。

 function getByName(name) {
 var ret;
 $("p").each(function() {
 if ($(this).attr("name") == name) {
 ret = $(this);
 }
 });
 return ret;
 }

 $(function(){
 $("p[name^=massege_]").css("display","none");
 
 $(":radio[name^=radio_state_]").click(function(){
 if( $(this).attr("value") == 'show' ){
 getByName("massege_"+$(this).attr("name").replace(/(radio_state_)(.+)/,"$2")).slideDown("slow");
 }else{
 getByName("massege_"+$(this).attr("name").replace(/(radio_state_)(.+)/,"$2")).slideUp("slow");
 }
 });
 });

属性指定のセレクタを使うところを、P タグの要素を総当たりで調べるように変更してます。


nagato-yukiさんのコメント
ご回答ありがとうございます。 ソースを修正したところ、正常に表示されました。 しかし、できればname属性の値はそのままにして文字列が表示されるページを作りたいと思っておりました。 そろしければ、name属性の値をそのままに文字列の表示ができるソースコードを教えていただければ幸いです。

a-kuma3さんのコメント
追記しました。 手元の環境では、動作確認済みです。

nagato-yukiさんのコメント
追記のご回答ありがとうございました。 加えて、非常に参考になる文献もご提示いただきまして感謝しております。 ソースコードもとても参考になりました。 また、name属性の規格上の使える文字は、とても勉強になりました。 迅速なご回答ありがとうございました。

質問者から

name属性の値をそのままに「jQuery1.5」の文字列の表示ができるソースコードを教えてください。


2 ● Cherenkov
●50ポイント ベストアンサー

(規格上アスタリスクはだめかもしれませんが)
jQuery1.5.2で、
$('[name=massege_1*1]') はダメで、
$('[name="massege_1*1"]') はいけるみたいですね。
古いCSSセレクタの例でクォーテーションが無いものを見かけますが、付けたほうがいいと思います。

適当に添削。
http://jsfiddle.net/cherenkov/T6qvY/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>jQuery1.5</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
 $(function() {
 $('p[name^="massege_"]').css('display', 'none');
 //キャッシュに選択した情報が残っているので、毎回非表示にチェックを入れる。
 $('#hidden1, #hidden2').click(); 
 
 $(':radio[name^="radio_state_"]').click(function() {
 var msg = $('p[name="massege_' + this.name.replace(/radio_state_(.+)/,'$1') + '"]');
 if (this.value === 'show') {
 msg.slideDown("slow");
 } else {
 msg.slideUp("slow");
 }
 });
 });
</script>
</head>
<body>
 <input type="radio" name="radio_state_1*1" id="show1" value="show" />
 <label for="show1">表示</label>
 <input type="radio" name="radio_state_1*1" id="hidden1" value="" checked="checked" />
 <label for="hidden1">非表示</label><br />
 <p name="massege_1*1">
 jQuery1.5
 </p>
 <br />
 <input type="radio" name="radio_state_2*2" id="show2" value="show" />
 <label for="show2">表示</label>
 <input type="radio" name="radio_state_2*2" id="hidden2" value="" checked="checked" />
 <label for="hidden2">非表示</label><br />
 <p name="massege_2*2">
 jQuery1.5
 </p>
</body>
</html>

nagato-yukiさんのコメント
ご回答ありがとうございました。 また、ソースコードのご提示もお礼申し上げます。 そして、キャッシュの選択情報についてのご指摘は勉強になりました。 このようなちょっとした所のアドバイスがとても参考になります。 ご回答ありがとうございました。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ