この記事では、シャトルボックス効果を実現するためのjQueryの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。 はじめに:今日はシャトルフレームの実現について紹介します レイアウト実装 <div id="ボックス"> <div id="boxleft"> <ul id="left_ul"> </ul> </div> <div id="boxbtn"> <button id="btn_right">>>>></button> <ボタン id="btn_left"> <<<< </ボタン> </div> <div id="boxright"> <ul id="right_ul"> </ul> </div> </div> レイアウトスタイル <スタイル> * { マージン: 0 自動; パディング: 0; リストスタイル: なし; } #箱 { 幅: 500ピクセル; ディスプレイ: フレックス; コンテンツの両端揃え: スペースを空ける; 上マージン: 20px; } #ボックス右 { 幅: 200ピクセル; 高さ: 500px; 境界線: 1px 実線ダークシアン; } #ボックス左 { 幅: 200ピクセル; 高さ: 500px; 境界線: 1px 実線ダークシアン; } #ボックスボタン{ マージン: 自動; } #boxbtn ボタン { 幅: 50px; 高さ:200ox; 上マージン: 10px; ディスプレイ: フレックス; 背景: deepskyblue; カーソル: ポインタ; 色: 白; } ul li { 高さ: 30px; 行の高さ: 30px; 下マージン: 2px; テキスト配置: 中央; 背景: ダークグレー; } 形状 { テキスト配置: 中央; } 。アクティブ { 色: 白; 背景: ダークシーグリーン; } </スタイル> コードの実装 <スクリプト> arr = [とする { "id": 1, "name": "zhang", "check": false }, { "id": 2, "name": "liu", "check": false }, { "id": 3, "name": "guan", "check": false }, { "id": 4, "name": "zhao", "check": true }, { "id": 5、 "name": "ao"、 "check": true } ]; $("#add").click(関数() { var name = $("#name").val(); arr.push({ "名前": 名前 }); 表示UL(arr); }) $(関数() { 表示UL(arr); }) 関数 showUL(arr) { var leftstr = ""; var rightstr = ""; for(let i in arr) { {id、名前、チェック} = arr[i]とします。 if (チェック) { 右文字列 += ` <li _id="${id}">${名前}</li> ` } それ以外 { 左str += ` <li _id="${id}">${名前}</li> ` } } $("#left_ul").html(leftstr); $("#right_ul").html(rightstr); } $("#left_ul").on("クリック", "li", 関数 () { インデックスをarr.findIndex((v) => {とする v.id == $(this).attr("_id"); を返します。 }) $(this).hasClass('active') の場合 { $(this).removeClass('active'); arr[インデックス].check = false; } それ以外 { $(this).addClass('アクティブ'); arr[インデックス].check = true; } }); $("#right_ul").on("クリック", "li", 関数 () { インデックスをarr.findIndex((v) => {とする v.id == $(this).attr("_id"); を返します。 }) $(this).hasClass('active') の場合 { $(this).removeClass('active'); arr[インデックス].check = true; } それ以外 { $(this).addClass('アクティブ'); arr[インデックス].check = false; } }); $("#btn_right").click(関数() { ($("#left_ul .active").length == 0) の場合は false を返します。 表示UL(arr); }) $("#btn_left").click(関数() { ($("#right_ul .active").length == 0) の場合は false を返します。 表示UL(arr); }) </スクリプト> 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL 5.7.13 ソースコードのコンパイル、インストール、および構成方法のグラフィックチュートリアル
>>: DockerコンテナでのMySQLデータのインポート/エクスポートの詳細な説明
1. はじめにMYSQL の MDL ロックは常に頭痛の種でした。ロックについて話すとき、通常は I...
1. 概要information_schema データベースは performance_schema...
私は長い間PHPに触れてきましたが、インストール環境は非常に不慣れです。多くの問題に遭遇しました。B...
序文スタンドアロン ロックであっても分散ロックであっても、共有データに基づいて現在の操作の動作を判断...
a タグ疑似クラスの役割: 「:link」: 訪問されていないタグの状態。 「:visited」: ...
VMware のインストールパッケージのインストールダウンロードアドレス: https://www....
MySQL バージョン: MySQL Community Edition (GPL) ------ ...
シリアル化の実装InnoDB は 2 つの方法でシリアル化を実装します。まず、SELECT 文が明示...
目次1. nginx とは何ですか? 2. nginx で何ができるのか? 2.1 フォワードプロキ...
目次ビジネスシナリオ:効果のデモンストレーション:ビジネスシナリオ: el-form を使用する場合...
長い間 MySQL を使ってきたので、SQL 文はすでに覚えていると思います。そこで、その実行原理を...
使用シナリオ:ジャンプ パスは、傍受された URL に応じて動的に構成する必要があります。これは、イ...
最近、社内の業務調整により、以前の超長文のロジックが大幅に変更されたため、リファクタリングする予定で...
Web デザインにおけるツリーとは何ですか?簡単に言うと、リンクをクリックするとサブディレクトリが展...
コードを見てみましょう:コードをコピーコードは次のとおりです。 < !DOCTYPE html...