質問: ### 前提・実現したいこと 表の項目によって表示させるモーダルを変えたいです。 ただしベースの形は同じで、中身の表示情報が変わる (idを変えるなど)ようなイメージです。 ### 詳細 | name | code | color | | --- | --- | --- | | apple | data_ap | red | | orange | data_or | orange | | lemon | data_le | yellow | 上記のようなデータがCSVで保存されていて1行ずつ読み込んで テーブルの形になるように出力しています。 イメージとしては以下のようになります。 ``` name code color ヘッダー りんごです(オレンジですなど) Close ``` りんごのcodeをクリックしたらモーダル内にはりんごの情報 オレンジのcodeをクリックしたらモーダル内にはオレンジの情報 が出力されるようにしたいです。 --- ★ ↓追記↓ ★ modalの出力にはbootstrap3.3.7を使っています。 下記ページのDownload Bootstrap3.7.7ボタンでダウンロードされたzipを ローカルに配置し読み込んでいます。 (バージョンが若干古いのは仕様の関係です。。) bootstrap3.3.7 jQueryはwordpress4.9.6に入っている?ものを使っています。 wordpressからインストールできるプラグインは使っていません。 ★ ↑追記↑ ★ ### 試したこと 1) 上記ソース$csv_data_t[i]にあたる値をidに設定。(iは可変) モーダル側のidも$csv_data_t[i]で待つようにしましたが 複数行ある場合だと最後の行しかモーダルが表示されませんでした。 2) 1)があったので、最終行以外も表示させるために クリックイベントを発生させjQueryを使ってモーダル表示対象にしたいidを取得 モーダルが表示できないかと考えました。 この場合は逆に1番先頭行だけが動作しています。 ``` ``` ### 補足情報 wordpressを使っている関係でhtml + php がベースになっています。 --- 実際のデータはもっと行が増えるのでできるだけ スマートに書けたらいいなと思っています。 モーダル一つ一つを別ファイルで~とかの方が早いなど なにか知識お持ちでしたらぜひご教授ください。 また情報不足ありましたらご指摘お願いします。
回答: とりあえず `id="modal_value"` がページ内に大量に出来るコードになっていますが、ページ中のidは重複できません。また、``が列ごとに生成されるコードになっているのも修正されることをお勧めします。 クリックするボタンごとに内容を書き換えるサンプルが公式ページにもあるので、参考にしてみてはいかがでしょうか。 【【Bootstrap3】モーダルに「data-*」属性でデータを渡す】 【JavaScript · Bootstrap】