jQueryはシャトルボックス効果を実現します

jQueryはシャトルボックス効果を実現します

この記事では、シャトルボックス効果を実現するための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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • jQueryはシャトルボックス機能を実現する

<<:  MySQL 5.7.13 ソースコードのコンパイル、インストール、および構成方法のグラフィックチュートリアル

>>:  DockerコンテナでのMySQLデータのインポート/エクスポートの詳細な説明

推薦する

Vue の基本 MVVM、テンプレート構文、データバインディング

目次1. Vueの概要Vue公式サイトMVVM アーキテクチャ パターンVue の紹介2. Vueを...

Dockerデータストレージのバインドマウントの詳細な説明

この記事を読む前に、Volumes について予備知識を身に付けておいてください。詳細については、こち...

MySql 5.7.20 のインストールとデータおよび my.ini ファイルの構成

1. まずMySqlの公式サイトからダウンロードします参考: https://www.jb51.ne...

Node.js でのブレークポイント再開の実装

序文通常のビジネスニーズ: 写真、Excel などをアップロードします。結局のところ、数 MB のサ...

CentOS7 に Redis をインストールして設定する方法

導入Redis を詳しく説明する必要はありません。インストールと設定を始めましょう。インストールソー...

JavaScript ESの新機能letとconstキーワードに基づく

目次1. letキーワード1.1 基本的な使い方1.2 変動昇進はない1.3 一時的なデッドゾーン1...

MySql テーブル、データベース、シャーディング、パーティショニングの知識の詳細な説明

1. はじめにデータベース内のデータ量が一定レベルに達すると、システムパフォーマンスのボトルネックを...

CMD で MySQL データベースを操作するときに中国語の文字化けが発生する問題の解決方法

Baiduで検索しました。 。 chcp コマンドを使用して、cmd の文字エンコーディングを 65...

CSS3はアニメーション効果を実現するためにvar()とcalc()関数を使用する。

ナレッジポイントをプレビューします。アニメーションフレーム背景グラデーションvar() と calc...

NodeJSのモジュール性に関する詳細な説明

目次1. はじめに2. 本文2.1 モジュールとは何ですか? 2.2 解決2.3、require.r...

ウェブページのCSSの優先順位について詳しく説明します

CSS の優先順位について話す前に、CSS とは何か、CSS が何に使用されるのかを理解する必要があ...

Linux で誤って削除したメッセージ ファイルを復元する方法

プロセスで使用されていて、誤って削除されたファイルがある場合、それらを回復することができます。プロセ...

MySQLデータのバックアップとリカバリの実装方法の分析

この記事では、例を使用して MySQL データのバックアップと復元の方法について説明します。ご参考ま...

HTML における画像タグの使用方法の詳細な説明

HTML では、<img> タグはテキスト内の画像タグを定義するために使用されます。その...

Vue を使用してパブリック アカウントの Web ページを開発する方法

目次プロジェクトの背景始めるvue-cliでプロジェクトを作成するモバイル適応についてnormali...