この記事では、シャトルボックス効果を実現するための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. Vueの概要Vue公式サイトMVVM アーキテクチャ パターンVue の紹介2. Vueを...
この記事を読む前に、Volumes について予備知識を身に付けておいてください。詳細については、こち...
1. まずMySqlの公式サイトからダウンロードします参考: https://www.jb51.ne...
序文通常のビジネスニーズ: 写真、Excel などをアップロードします。結局のところ、数 MB のサ...
導入Redis を詳しく説明する必要はありません。インストールと設定を始めましょう。インストールソー...
目次1. letキーワード1.1 基本的な使い方1.2 変動昇進はない1.3 一時的なデッドゾーン1...
1. はじめにデータベース内のデータ量が一定レベルに達すると、システムパフォーマンスのボトルネックを...
Baiduで検索しました。 。 chcp コマンドを使用して、cmd の文字エンコーディングを 65...
ナレッジポイントをプレビューします。アニメーションフレーム背景グラデーションvar() と calc...
目次1. はじめに2. 本文2.1 モジュールとは何ですか? 2.2 解決2.3、require.r...
CSS の優先順位について話す前に、CSS とは何か、CSS が何に使用されるのかを理解する必要があ...
プロセスで使用されていて、誤って削除されたファイルがある場合、それらを回復することができます。プロセ...
この記事では、例を使用して MySQL データのバックアップと復元の方法について説明します。ご参考ま...
HTML では、<img> タグはテキスト内の画像タグを定義するために使用されます。その...
目次プロジェクトの背景始めるvue-cliでプロジェクトを作成するモバイル適応についてnormali...