最近、リストページを含むプロジェクトを作成しました。ユーザーエクスペリエンスの場合、すべての操作はJSを使用して実装されます。これには、上昇、下降、削除などの機能が含まれます。フロントエンドJS、およびバックエンドデータの変更はAJAXを使用します。この記事では、主にフロントエンドJSセクションについて説明しています。
最初にページのスクリーンショットを見てみましょう
HTML構造を見てください。もちろん、これはフロントエンドの画像の切断に関連しています。バックエンドプログラムのスタッフは、独自のJSを作成する責任があります。私たちのプロジェクトを例に取り、彼らがカットしたHTMLを見てみましょう。
<ul> <li> <div> <div> <span> </span> <span> content <em> 1 </em>：</span> <em> 2013残業work.txt </em> </div> <div> 2014/9/24 9:54:00 </div> <div> <a value = "253040" href = "Javascript： value = "253040" href = "javascript：;"> <span>下に移動しますhref = "javascript：;"> <span> delete </span> </a> </div> </li> <li> <div> <div> <div> <span> </span> <span> content <em> 2 </em>：</span> <em> use.txt </em> </div> <div> div> <<a div> href = "javascript：;"> <span> Move Up </span> </a> <a value = "253041" href = "javascript：;"> <span>移動</span> </a> <a value = "253041" href = "javascript：;"> <span> </span </span> </a> < href = "javascript：;"> <span> delete </span> </a> </div> </li> <li> <div> <div> div> <span> </span> <span> content <em> 3 </em>：</span> <em> Zhanzhan.txt </em> </div値= "253040" href = "javascript：;"> <span>ムーブアップ</span> </a> <a value = "253040" href = "javascript：;"> <span> move </span> </a> <a value = "253040" href = "javascript： href = "javascript：;"> <span> delete </span> </a> </div> </li> <li> <div> <div> <span> </span> <span> content <em> 4 </em>：</span> <em> searting fource.txt </em> </div> <div> "2530 </< href = "javascript：;"> <span> Move Up </span> </a> <a value = "253041" href = "javascript：;"> <span>移動</span> </a> <a value = "253041" href = "javascript：;"> <span> </span </span> </a> < href = "javascript：;"> <span> delete </span> </a> </div> </div> </li> </ul>
主にJQ On Methodを使用して実装されているJSコードを見てみましょう。その理由は、リスト内のデータが初めて静的であるためです。ソートすると、データは動的になります（ライブ）。したがって、この構造はでのみ使用できます。コードを見てみましょう。
<script type = "text/ecmascript"> $（function（）{// up up $（ "。clearfix"） （_new.length> 0）{var _temp = _old.html（）; _ old.empty（）。append（_new.html（））; _ new.empty（）。 $（this）; var _old = self.closest（ "li.courselist"）; var _new = self.closest（ "li.courselist"）。 _old.html（）; _ old.empty（）。append（_new.html（））; _ new.empty（）。append（_temp）;}}）; // delete $（ "。clearfix"）。 self.closest（ "li.courselist"）。remove（）;}）;}）; </script>実行後、効果がリリースされます。このJSは、背景と相互作用するためのAJAXメソッドを書き留めません。特定の状況に応じて決定できます。