ページ内で動的に生成された要素をサイト内の別ファイルにリンクした際に引継ぐ処理を行いたいのですが具体的な設計がまとまりません。
【行いたい処理の概要】
①ページアクセス時(000.html)
・000.html~003.htmlの各ファイルのページは同様のマークアップレイアウトです。
lang
1<ul> 2 <li><a href="001.html">001</a></li> 3 <li><a href="002.html">002</a></li> 4 <li><a href="003.html">003</a></li> 5</ul> 6 7<ul class="aaa"> 8 <li><img src="aaa/jpg" alt="aaa"></li> 9 <li><img src="bbb/jpg" alt="bbb"></li> 10 <li><img src="ccc/jpg" alt="ccc"></li> 11 <li><img src="ddd/jpg" alt="ddd"></li> 12</ul> 13 14<div id="cloneBox"> 15 <!--動的要素をここに生成--> 16</div>
②ページ内で動的要素を生成してページ遷移(000.html)
・リスト要素(ul.aaa)内のリスト画像をクリックすると、選択された画像をコピー要素(#cloneBox)内に生成される(クリックされた分だけ画像はコピー要素に生成される仕様です)
・ここで生成された要素エレメントを保持したまま上部メニューのいずれかのページにリンクする場合③へ
lang
1<ul> 2 <li><a href="001.html">001</a></li> <!-- ③.②後、このページにリンク --> 3 <li><a href="002.html">002</a></li> 4 <li><a href="003.html">003</a></li> 5</ul> 6 7<ul class="aaa"> 8 <li><img src="aaa/jpg" alt="aaa"></li> <!-- ①.ここをクリックした処理 --> 9 <li><img src="bbb/jpg" alt="bbb"></li> 10 <li><img src="ccc/jpg" alt="ccc"></li> 11 <li><img src="ddd/jpg" alt="ddd"></li> 12</ul> 13 14<div id="cloneBox"> 15 <img src="aaa/jpg" alt="aaa"> <!--②.①クリック処理で要素が生成される--> 16 <img src="ccc/jpg" alt="ccc"> 17 ・・・ 18</div>
③リンクページ遷移後も動的要素は保持(001.html)※ここからが質問したい処理
・000.html → 001.htmlにページ遷移した後も共通のコピー要素(#cloneBox)内には前のページ(000.html)で生成された要素画像がそのまま保持されたままページにアクセス
lang
1<ul> 2 <li><a href="000.html">000</a></li> 3 <li><a href="002.html">002</a></li> 4 <li><a href="003.html">003</a></li> 5</ul> 6 7<ul class="aaa"> 8 <li><img src="eee/jpg" alt="eee"></li> 9 <li><img src="fff/jpg" alt="fff"></li> 10 <li><img src="ggg/jpg" alt="ggg"></li> 11 <li><img src="hhh/jpg" alt="hhh"></li> 12</ul> 13 14<div id="cloneBox"> 15 <img src="aaa/jpg" alt="aaa"> <!--①.000.htmlで生成された要素は保持したまま--> 16 <img src="ccc/jpg" alt="ccc"> 17 ・・・ 18</div>
参照①、②の同じページの中で動的に要素を生成する処理は完成しているのですが、
③の様に同サイト内の別ページにリンクされた際に各ページの共通要素となるコピー要素(#cloneBox)に生成された画像(エレメント)を保持したまま各ページを遷移できる処理の設計がまとまっていません。
現在は
1.ajaxの非同期通信でphpファイルへコピー要素(#cloneBox)内のエレメントをdataとして送信
2.受信先のPHPファイルで受け取ったdataを配列として持ってから対象のページへ遷移処理
3.PHPファイルで代入された配列を遷移先ページのseccionで受け取った配列を分解して動的にコピー要素(#cloneBox)へ再生成
4.またページ内でコピー要素(#cloneBox)に追加された画像を持ったままリンクされたら①へ戻る
というイメージで処理を考えているのですが、PHPに関しては初心者ですので現実的に可能なのかも不明です。
そもそも質問する段階の次元ではないのかもしれませんが
実現可能と思われる設計、学ぶべき技術・関数・処理など
どんな事でも構いませんのでご教授いただける方、アドバイス頂ければ幸いです。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/01/25 12:32
2015/01/25 13:14
2015/01/25 13:57