質問: 初めまして。 jquery 初心者です。 下記の参考サイトのような機能を実装したく、いろいろとwebで調べましたが、答えにたどり着けず困っております。 どなたか教えていただけると嬉しいです。 やりたいことというのは、下記のURLの通りなんですが、一点問題が発生しました。 ※参考サイト(サンプル画面) ※参考サイト(説明ページ) 問題というのは、たとえば、 生徒の一覧画面にAさん、Bさん、Cさん、Dさん と並べて 各それぞれの人に対してボタン配置させた場合、上記のURLのままやると全員のテキストが同時に入れ変わってしまいます。 これを各自別々に作動するように分けたいのですが、いくら調べてもわかりませんでした。 同じクラスが指定されているので、全部一緒に入れ替わるという理屈は分かるのですが、別々にする作動する記述がどうしても分からないままです。 別々のclassやidに別けてで生徒の人数分のjsを書けば良いじゃないか!と言われるかと思いますが、それだと、人数が増えた文記述数も増えていくので、ほかに良い方法があるのではと思っています。 どなたかご教授いただけると助かります。 よろしくお願いします。 追記======= 一点追記になります。 変更したいテキストというのは、住所、電話番号などの各自それぞれ別々データになります。 [例] 田中太郎君 クリック→ [東京都渋谷区]→[03-1111-1111]→ループ 吉岡二郎君 クリック→ [神奈川県横浜市]→[043-111-1111]→ループ というようなイメージです 現状のコード=================== 上記の参考URLを参考にしております。 ``` 山田太郎 【契約住所】〒150-0002 東京都渋谷区渋谷 【電話番号】03-xxxx-1111 吉岡二郎 【契約住所】〒150-0052 東京都渋谷区元代々木町 【電話番号】03-xxxx-2222 ``` 下記がスクリプトになります。 ``` ```
回答: 例えば以下のような感じ。 名簿のデータを ``` var db = [ { name:"田中太郎君", message:["東京都渋谷区", "03-1111-1111"] }, { name:"吉岡二郎君", message:["神奈川県横浜市", "043-111-1111"] }, { name:"横尾陽子さん", message:["静岡県静岡市", "xxx-xxx-1111"] } ]; ``` のような形で持ち、このデータから表示を作成します。 メッセージ部分にクリック時に実行する関数をクロージャー(メッセージ配列とインデックスを保持する:それぞれに保持する必要があるため)で割り当てます。 ``` SAMPLE ```