ホームページ ウェブフロントエンド jsチュートリアル JSでリスト内に上へ移動・下へ移動・削除などの機能を実装_javascriptスキル

JSでリスト内に上へ移動・下へ移動・削除などの機能を実装_javascriptスキル

May 16, 2016 pm 04:35 PM
リスト 消去

私は最近、リスト ページを含むプロジェクトに取り組みました。ユーザー エクスペリエンスを向上させるために、リスト内の移動、削除、その他の機能を含むすべての操作が 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メソッドを記述しません。具体的な状況に応じて決定してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

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

inetpubフォルダーは削除できますか? Cドライブのinetpubフォルダーを簡単に削除する方法 inetpubフォルダーは削除できますか? Cドライブのinetpubフォルダーを簡単に削除する方法 Mar 13, 2024 pm 02:00 PM

inetpubフォルダーは削除できますか? Cドライブのinetpubフォルダーを簡単に削除する方法

小紅書メモを削除する方法 小紅書メモを削除する方法 Mar 21, 2024 pm 08:12 PM

小紅書メモを削除する方法

.000 が見つかったフォルダーは何ですか? found.000フォルダは削除できますか? .000 が見つかったフォルダーは何ですか? found.000フォルダは削除できますか? Mar 13, 2024 pm 08:52 PM

.000 が見つかったフォルダーは何ですか? found.000フォルダは削除できますか?

WeChat でブロックされたり削除されたり、永久に追加できなくなったりする可能性があるというのは本当ですか? WeChat でブロックされたり削除されたり、永久に追加できなくなったりする可能性があるというのは本当ですか? Apr 08, 2024 am 11:41 AM

WeChat でブロックされたり削除されたり、永久に追加できなくなったりする可能性があるというのは本当ですか?

Xiaohonshuのリリースを削除するにはどうすればよいですか?削除後に復元するにはどうすればよいですか? Xiaohonshuのリリースを削除するにはどうすればよいですか?削除後に復元するにはどうすればよいですか? Mar 21, 2024 pm 05:10 PM

Xiaohonshuのリリースを削除するにはどうすればよいですか?削除後に復元するにはどうすればよいですか?

hiberfil.sys ファイルとは何ですか? hiberfil.sysは削除できますか? hiberfil.sys ファイルとは何ですか? hiberfil.sysは削除できますか? Mar 15, 2024 am 09:49 AM

hiberfil.sys ファイルとは何ですか? hiberfil.sysは削除できますか?

WeChat ファイル転送アシスタントを完全に削除する方法_WeChat ファイル転送アシスタントを終了する方法の紹介 WeChat ファイル転送アシスタントを完全に削除する方法_WeChat ファイル転送アシスタントを終了する方法の紹介 Mar 20, 2024 pm 08:31 PM

WeChat ファイル転送アシスタントを完全に削除する方法_WeChat ファイル転送アシスタントを終了する方法の紹介

TikTokのチャット履歴を完全に削除する方法 TikTokのチャット履歴を完全に削除する方法 May 07, 2024 am 11:14 AM

TikTokのチャット履歴を完全に削除する方法

See all articles