

初めまして。 jquery 初心者です。  
下記の参考サイトのような機能を実装したく、いろいろとwebで調べましたが、答えにたどり着けず困っております。 どなたか教えていただけると嬉しいです。

やりたいことというのは、下記のURLの通りなんですが、一点問題が発生しました。

※参考サイト（サンプル画面）  
<http://www.iltt.info/page/information/contents/20091105_sample.htm>

※参考サイト（説明ページ）  
<http://www.iltt.info/page/information/contents/20091105.htm>

問題というのは、たとえば、 生徒の一覧画面にAさん、Bさん、Cさん、Dさん と並べて
各それぞれの人に対してボタン配置させた場合、上記のURLのままやると全員のテキストが同時に入れ変わってしまいます。

これを各自別々に作動するように分けたいのですが、いくら調べてもわかりませんでした。

同じクラスが指定されているので、全部一緒に入れ替わるという理屈は分かるのですが、別々にする作動する記述がどうしても分からないままです。

別々のclassやidに別けてで生徒の人数分のjsを書けば良いじゃないか！と言われるかと思いますが、それだと、人数が増えた文記述数も増えていくので、ほかに良い方法があるのではと思っています。

どなたかご教授いただけると助かります。

よろしくお願いします。

追記＝＝＝＝＝＝＝  
一点追記になります。  
変更したいテキストというのは、住所、電話番号などの各自それぞれ別々データになります。

[例]

田中太郎君  
クリック→ [東京都渋谷区]→[03-1111-1111]→ループ

吉岡二郎君  
クリック→ [神奈川県横浜市]→[043-111-1111]→ループ

というようなイメージです

現状のコード＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

上記の参考URLを参考にしております。

[code]

    山田太郎    
    <div style="border: solid 1px #ccc">
        <div class="cm1">
            <p class="change "> 【契約住所】〒150-0002　東京都渋谷区渋谷</p>
        </div>
        <div class="cm2">
            <p class="change ">【電話番号】03-xxxx-1111</p>
        </div>
    </div>
    
    吉岡二郎
    <div style="border: solid 1px #ccc">
        <div class="cm1">
            <p class="change ">【契約住所】〒150-0052　東京都渋谷区元代々木町</p>
        </div>
        <div class="cm2">
            <p class="change ">【電話番号】03-xxxx-2222</p>
        </div>
    </div>
    
[/code]

下記がスクリプトになります。

[code]

    <script type="text/javascript">
        $(function () {
            $(".change").click(function () {
                for (i = 1; i < 3; i++) {
                    if (i == 2) {
                        j = 1;
                    } else {
                        j = i + 1;
                    }
                    if ($(".cm" + i).css("display") != "none") {
                        $(".cm" + i).hide();
                        $(".cm" + j).show();
                        break;
                    }
                }
            });
        });
    </script>
    
[/code]


CC BY-SA 3.0
2016-06-02T06:49:59.583
25382
2016-06-02T11:21:50.400
2016-06-02T11:21:50.400
15733
question
jquery
jquery で　複数の別々のテキストをクリックしてテキスト内容を個別に変更＋ループ


例えば以下のような感じ。  
名簿のデータを

[code]

    var db = [
        { name:"田中太郎君",   message:["東京都渋谷区", "03-1111-1111"] },
        { name:"吉岡二郎君",   message:["神奈川県横浜市", "043-111-1111"] },
        { name:"横尾陽子さん", message:["静岡県静岡市", "xxx-xxx-1111"] }
    ];
    
[/code]

のような形で持ち、このデータから表示を作成します。  
メッセージ部分にクリック時に実行する関数をクロージャー（メッセージ配列とインデックスを保持する：それぞれに保持する必要があるため）で割り当てます。

[code]

    <html>
    <head>
    <title>SAMPLE</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
    var db = [
     { name:"田中太郎君",   message:["東京都渋谷区", "03-1111-1111"] },
     { name:"吉岡二郎君",   message:["神奈川県横浜市", "043-111-1111"] },
     { name:"横尾陽子さん", message:["静岡県静岡市", "xxx-xxx-1111"] }
    ];
    </script>
    <style>
    table#Roster { border-collapse: collapse; }
    #Roster td { border: 1px black solid; }
    </style>
    </head>
    <body>
    <table id="Roster"></table>
    <script>
    function func(messages){
     var i = 0;
     return function(){
      i = (i + 1) % messages.length;
      $(this).text(messages[i]);
     };
    }
    $.each(db, function(index, value){
     var record = $("<tr></tr>")
      .append("<td>" + value.name + "</td>")
      .append($("<td>" + value.message[0] + "</td>").click(func(value.message)));
     $("#Roster").append(record);
    });
    </script>
    </body>
    </html>
[/code]


CC BY-SA 3.0
2016-06-02T08:10:33.663
25383
2016-06-02T08:10:33.663
5044
25382
answer


こういうこと？

[code]

    $(function () {
            $(".change").click(function (e) {
             //現在の要素を非表示
             $(e.target).parent().hide();
             //現在の要素を末尾に移動
             $(e.target).parent().parent().append($(e.target).parent());
             //先頭の要素を表示
             $(e.target).parent().parent().children("div:eq(0)").show();
            });
        });
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    山田太郎 
    <div style="border: solid 1px #ccc">
        <div>
            <p class="change"> 【契約住所】〒150-0002　東京都渋谷区渋谷</p>
        </div>
        <div style="display:none">
            <p class="change">【電話番号】03-xxxx-1111</p>
        </div>
    </div>
    
    吉岡二郎
    <div style="border: solid 1px #ccc">
        <div>
            <p class="change">【契約住所】〒150-0052　東京都渋谷区元代々木町</p>
        </div>
        <div style="display:none">
            <p class="change">【電話番号】03-xxxx-2222</p>
        </div>
    </div>
[/code]


CC BY-SA 3.0
2016-06-02T08:45:35.947
25387
2016-06-02T08:45:35.947
25382
answer