JSでリスト内に上へ移動・下へ移動・削除などの機能を実装_javascriptスキル
私は最近、リスト ページを含むプロジェクトに取り組みました。ユーザー エクスペリエンスを向上させるために、リスト内の移動、削除、その他の機能を含むすべての操作が JS を使用して実装されています。 、バックエンド データは AJAX を使用して変更されます。この記事では主にフロントエンド JS
について説明します。まずページのスクリーンショットをご覧ください
その HTML 構造を見てください。もちろん、これはフロントエンドの切断に関連しています。バックエンド プログラマーは独自の JS を作成することのみを担当します。私たちのプロジェクトを例として HTML を見てみましょう。彼らは
を切りました<ul class="clearfix"> <li class="courseList"> <div class="titDefault clearfix"> <div class="left clearfix"> <span class="dragBtn"></span><span class="tit">内容<em class="contIndex">1</em>:</span><em title="2013年 加班.txt" class="titDefaultName">2013年 加班.txt</em> </div> <div class="mid">2014/9/24 9:54:00</div> <div class="right clearfix"> <a value="253040" class="moveUpBtn" href="javascript:;"><span class="delTit">上移</span></a> <a value="253040" class="moveDownBtn" href="javascript:;"><span class="delTit">下移</span></a> <a value="253040" class="deleteBtn" href="javascript:;"><span class="delTit">删除</span></a> </div> </div> </li> <li class="courseList"> <div class="titDefault clearfix"> <div class="left clearfix"> <span class="dragBtn"></span><span class="tit">内容<em class="contIndex">2</em>:</span><em title="使用说明.txt" class="titDefaultName">使用说明.txt</em> </div> <div class="mid">2014/9/24 9:54:00</div> <div class="right clearfix"> <a value="253041" class="moveUpBtn" href="javascript:;"><span class="delTit">上移</span></a> <a value="253041" class="moveDownBtn" href="javascript:;"><span class="delTit">下移</span></a> <a value="253041" class="deleteBtn" href="javascript:;"><span class="delTit">删除</span></a> </div> </div> </li> <li class="courseList"> <div class="titDefault clearfix"> <div class="left clearfix"> <span class="dragBtn"></span><span class="tit">内容<em class="contIndex">3</em>:</span><em title="占占大师.txt" class="titDefaultName">占占大师.txt</em> </div> <div class="mid">2014/9/24 9:54:00</div> <div class="right clearfix"> <a value="253040" class="moveUpBtn" href="javascript:;"><span class="delTit">上移</span></a> <a value="253040" class="moveDownBtn" href="javascript:;"><span class="delTit">下移</span></a> <a value="253040" class="deleteBtn" href="javascript:;"><span class="delTit">删除</span></a> </div> </div> </li> <li class="courseList"> <div class="titDefault clearfix"> <div class="left clearfix"> <span class="dragBtn"></span><span class="tit">内容<em class="contIndex">4</em>:</span><em title="排序问题.txt" class="titDefaultName">排序问题.txt</em> </div> <div class="mid">2014/9/24 9:54:00</div> <div class="right clearfix"> <a value="253041" class="moveUpBtn" href="javascript:;"><span class="delTit">上移</span></a> <a value="253041" class="moveDownBtn" href="javascript:;"><span class="delTit">下移</span></a> <a value="253041" class="deleteBtn" href="javascript:;"><span class="delTit">删除</span></a> </div> </div> </li> </ul>
以下では、主に JQ の on メソッドを使用して実装された JS コードを見ていきます。その理由は、リスト内のデータが、ソート後に初めて静的 (バインド) になるためです。したがって、この構造には on を使用するのが最も合理的です。コード
を見てください。<script type="text/ecmascript"> $(function () { //上移 $(".clearfix").on("click", ".moveUpBtn", function () { var self = $(this); var _old = self.closest("li.courseList"); var _new = self.closest("li.courseList").prev("li"); if (_new.length > 0) { var _temp = _old.html(); _old.empty().append(_new.html()); _new.empty().append(_temp); } }); //下移 $(".clearfix").on("click", ".moveDownBtn", function () { var self = $(this); var _old = self.closest("li.courseList"); var _new = self.closest("li.courseList").next("li"); if (_new.length > 0) { var _temp = _old.html(); _old.empty().append(_new.html()); _new.empty().append(_temp); } }); //删除 $(".clearfix").on("click", ".deleteBtn", function () { var self = $(this);//当前click事件源对象 self.closest("li.courseList").remove(); }); }); </script>
実行後に効果が出ます。このJSはバックグラウンドとやり取りするためのAJAXメソッドを記述しません。具体的な状況に応じて決定してください。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック









パソコンの C ドライブに、多くのメモリを使用する inetpub フォルダーがあることがわかりました。この inetpub フォルダーは何ですか?直接削除できるのでしょうか?実際、inetpub は IIS サーバー上のフォルダーです。IIS の正式名は、Internet Information Services です。Web サイトの構築とデバッグに使用できます。不要な場合は、アンインストールできます。具体的な方法は以下のとおりです。 1. スタートメニューを右クリックし、「プログラムと機能」を選択します。 2. 開いたら、「Windows の機能の有効化または無効化」をクリックします。 3. Windows 機能リストで、II のチェックを外します。

小紅書メモを削除するにはどうすればよいですか? メモは小紅書アプリで編集できます。ほとんどのユーザーは小紅書メモの削除方法を知りません。次に、エディターがユーザーに小紅書メモの削除方法に関する写真とテキストを提供します。チュートリアル、興味のあるユーザーが来て、それを受講してください見てください!小紅書使い方チュートリアル 小紅書メモの削除方法 1. まず小紅書アプリを開いてメインページに入り、右下隅の[自分]を選択して特別エリアに入ります; 2. 次に、マイエリアで、表示されているメモページをクリックします下の図で、削除したいメモを選択します; 3. メモページに入り、右上隅の [3 つの点] をクリックします; 4. 最後に、下部に機能バーが展開され、[削除] をクリックして完了します。

1. まず、相手を永久にブロックして削除して永久に追加しないのは間違いで、ブロックして削除した後に相手を追加したい場合は、相手の同意だけが必要です。 2. ユーザーが誰かをブロックすると、相手はユーザーにメッセージを送信したり、ユーザーの友達サークルを表示したり、ユーザーと通話したりすることができなくなります。 3. ブロックとは、ユーザーの WeChat 連絡先リストから相手を削除することを意味するものではありません。 4. ユーザーが相手をブロックした後、ユーザーの WeChat 連絡先リストから相手を削除した場合、削除後に回復する方法はありません。 5. ユーザーが相手を再度友達として追加したい場合は、相手が同意してユーザーを再度追加する必要があります。

コンピュータを日常的に使用していると、「found.000 ファイルが紛失または破損している」というエラー メッセージが表示されることがあります。この found.000 はどのフォルダですか?役に立たなくなったら削除してもらえますか?このファイルを知らない人が非常に多いので、found.000 フォルダーについて詳しく説明しましょう~ 1. found.000 フォルダーとは何ですか? 不正なシャットダウンによりコンピューターが部分的または完全に失われた場合、 を見つけることができます。 「found.000」という名前の特別なフォルダーと、その中に含まれる「.chk」拡張子を持つファイルは、システム パーティション内の指定されたディレクトリにあります。この「フォ」

人気のソーシャル電子商取引プラットフォームとして、Xiaohongshu は日常生活やショッピング体験を共有するために多くのユーザーを魅了してきました。場合によっては、私たちが誤って不適切なコンテンツを公開してしまうことがありますが、個人的なイメージをより良く維持したり、プラットフォームの規制に準拠したりするために、適時に削除する必要があります。 1.Xiaohongshu リリースを削除するにはどうすればよいですか? 1. Xiaohonshu アカウントにログインし、個人のホームページに入ります。 2. 個人ホームページの下部で、「My Creations」オプションを見つけてクリックして入力します。 3. 「My Creations」ページでは、メモやビデオなどを含む、公開されているすべてのコンテンツを確認できます。 4. 削除する必要があるコンテンツを見つけて、右側の「...」ボタンをクリックします。 5. ポップアップ メニューで、[削除] オプションを選択します。 6. 削除を確認すると、個人ホームページおよび公開ページからコンテンツが削除されます。

最近、多くのネチズンが編集者に「hiberfil.sys ファイルとは何ですか?」と尋ねました。 hiberfil.sys は C ドライブのスペースを多く消費し、削除される可能性がありますか?エディターは、hiberfil.sys ファイルを削除できることを通知します。以下で詳細を見てみましょう。 hiberfil.sys は Windows システムの隠しファイルであり、システム休止状態ファイルでもあります。通常、C ドライブのルート ディレクトリに保存され、そのサイズはシステムに搭載されているメモリのサイズと同等です。このファイルはコンピュータが休止状態になっているときに使用され、リカバリ中に以前の状態にすばやく復元できるように、現在のシステムのメモリ データが含まれています。そのサイズはメモリ容量と等しいため、より多くのハードドライブスペースを占有する可能性があります。冬休み

小紅書は人気のあるソーシャル電子商取引プラットフォームであり、ユーザー間のインタラクティブなコメントはプラットフォーム上でのコミュニケーション手段として不可欠です。場合によっては、自分のコメントが他の人によって削除されていることがわかり、混乱することがあります。 1. 小紅書で他の人が削除したコメントを取得するにはどうすればよいですか?コメントが削除されたことに気付いた場合は、まずプラットフォーム上で関連する投稿や製品を直接検索して、コメントがまだ見つかるかどうかを確認してください。コメントが削除された後も表示される場合は、元の投稿の所有者によって削除された可能性があります。この時点で、元の投稿の所有者に連絡して、コメントを削除した理由を尋ね、コメントの復元をリクエストしてみてください。コメントが完全に削除され、元の投稿で見つからない場合、プラットフォーム上でコメントが復元される可能性は比較的低いです。他の方法を試すこともできます

1. Douyin アプリを開き、インターフェイスの下部にある [メッセージ] をクリックし、削除する必要があるチャット会話エントリをクリックします。 2. 任意のチャット記録を長押しし、[複数選択]をクリックし、削除したいチャット記録にチェックを入れます。 3. 右下隅の [削除] ボタンをクリックし、ポップアップ ウィンドウで [削除の確認] を選択して、これらのレコードを完全に削除します。
