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バージョンでもうまく表示される方法はありますでしょうか?
回答のソースを教えていただければと思います。
また、この現象の原因を教えていただれると幸いです。

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

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2012/11/02 17:43:40
  • 終了:2012/11/06 12:17:26

ベストアンサー

id:Cherenkov No.2

Cherenkov回答回数1502ベストアンサー獲得回数4922012/11/03 07:10:13

ポイント50pt

(規格上アスタリスクはだめかもしれませんが)
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>
id:nagato-yuki

ご回答ありがとうございました。
また、ソースコードのご提示もお礼申し上げます。

そして、キャッシュの選択情報についてのご指摘は勉強になりました。
このようなちょっとした所のアドバイスがとても参考になります。

ご回答ありがとうございました。

2012/11/03 10:42:53

その他の回答(1件)

id:a-kuma3 No.1

a-kuma3回答回数4412ベストアンサー獲得回数18032012/11/02 17:57:20

ポイント50pt

ラジオボタンの 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 タグの要素を総当たりで調べるように変更してます。

他1件のコメントを見る
id:a-kuma3

追記しました。
手元の環境では、動作確認済みです。

2012/11/03 00:13:13
id:nagato-yuki

追記のご回答ありがとうございました。
加えて、非常に参考になる文献もご提示いただきまして感謝しております。

ソースコードもとても参考になりました。
また、name属性の規格上の使える文字は、とても勉強になりました。

迅速なご回答ありがとうございました。

2012/11/03 10:32:19
id:nagato-yuki

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

id:Cherenkov No.2

Cherenkov回答回数1502ベストアンサー獲得回数4922012/11/03 07:10:13ここでベストアンサー

ポイント50pt

(規格上アスタリスクはだめかもしれませんが)
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>
id:nagato-yuki

ご回答ありがとうございました。
また、ソースコードのご提示もお礼申し上げます。

そして、キャッシュの選択情報についてのご指摘は勉強になりました。
このようなちょっとした所のアドバイスがとても参考になります。

ご回答ありがとうございました。

2012/11/03 10:42:53

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません