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データのインポート/エクスポートの詳細な説明

推薦する

MYSQL メタデータ ロック (MDL ロック) MDL ロックの問題分析

1. はじめにMYSQL の MDL ロックは常に頭痛の種でした。ロックについて話すとき、通常は I...

MySQL information_schema データベースの詳細な説明

1. 概要information_schema データベースは performance_schema...

MySql のクラッシュとサービスの起動失敗の解決策

私は長い間PHPに触れてきましたが、インストール環境は非常に不慣れです。多くの問題に遭遇しました。B...

MySQLにおける分散ロックの考え方をDBの助けを借りて詳しく説明します

序文スタンドアロン ロックであっても分散ロックであっても、共有データに基づいて現在の操作の動作を判断...

aタグ疑似クラスの機能と記述順序は何ですか?

a タグ疑似クラスの役割: 「:link」: 訪問されていないタグの状態。 「:visited」: ...

VMware 仮想マシンに CentOS と Qt をインストールするチュートリアル図

VMware のインストールパッケージのインストールダウンロードアドレス: https://www....

最新バージョンMySQL5.7.19 解凍版インストールガイド

MySQL バージョン: MySQL Community Edition (GPL) ------ ...

InnoDB がシリアル化分離レベルを実装する方法

シリアル化の実装InnoDB は 2 つの方法でシリアル化を実装します。まず、SELECT 文が明示...

nginxの基礎を学ぶ

目次1. nginx とは何ですか? 2. nginx で何ができるのか? 2.1 フォワードプロキ...

ElementUIはel-formフォームリセット機能ボタンを実装します

目次ビジネスシナリオ:効果のデモンストレーション:ビジネスシナリオ: el-form を使用する場合...

MySQLの実行原理、論理階層化、データベース処理エンジンの変更について詳しく説明します

長い間 MySQL を使ってきたので、SQL 文はすでに覚えていると思います。そこで、その実行原理を...

URLパラメータに基づくNginx転送

使用シナリオ:ジャンプ パスは、傍受された URL に応じて動的に構成する必要があります。これは、イ...

Vue+ElementUI で超大規模なフォーム例を処理する方法

最近、社内の業務調整により、以前の超長文のロジックが大幅に変更されたため、リファクタリングする予定で...

HTML&CSS&JS 互換性ツリー (IE、Firefox、Chrome)

Web デザインにおけるツリーとは何ですか?簡単に言うと、リンクをクリックするとサブディレクトリが展...

IE6 スペースバグ修正方法

コードを見てみましょう:コードをコピーコードは次のとおりです。 < !DOCTYPE html...