この記事の例では、ドロップダウンボックス選択コンポーネントを実装するためのjsの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。 機能要件: 1. div をクリックすると、div にフォーカス状態が表示され、同時にドロップダウン ボックスの内容が表示されます。 ドロップダウン ボックスが操作できない場合の表示ステータス: ドロップダウンボックスが操作可能な場合: お子様の人数を選択すると、対応するお子様の年齢選択ボックスが下に表示されます。 確認ボタンをクリックすると、上の div に結果が表示されます。 当初のアイデアは、それぞれ選択、ul ドロップダウン リスト、btn ボタンのイベントを監視することでした。さらに、ドロップダウン ボックスの他の位置がクリックされると、ul ドロップダウン リストが非表示になり、body がクリックされると、ドロップダウン ボックスの内容全体が非表示になります。監視イベントが多すぎると、イベント バブリングによってイベントの実行にも影響が及び、一部のイベントが複数回実行されることになります。 子供の年齢の選択ボックスは、子供の数に基づいて生成されます。年齢選択ボックスは、子供の数と同じ数だけあります。この場合、年齢選択ボックスは動的に作成する必要があり、年齢選択のイベントをリッスンすることはできません。イベント委任のみを使用できます。したがって、選択、ul ドロップダウン リスト、btn ボタンのクリック イベント、およびコンテナー内の他の位置がクリックされると、ul ドロップダウン リストは非表示になります。すべて dropDownContainer 要素に委任されます。 以下のコードを添付してください HTML構造コード: <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <title>選択</title> </head> <本文> <スクリプトタイプ="モジュール"> './js/Main.js' から Main をインポートします。 // パラメータが false の場合、選択ボックスはクリックできません。true の場合、選択ボックスを使用できます。let main=new Main(true); main.appendTo("本文"); </スクリプト> </本文> </html> Main.js ファイル: './Utils.js' から Utils をインポートします。 デフォルトクラスMainをエクスポートする{ 静的スタイル=false; リスト準備; コンストラクタ(状態){ //state はドロップダウン ボックスがクリック可能かどうかを制御します。this.state=state; this.elem = this.createE(); } 作成E(){ if(this.elem) は this.elem を返します。 div = Utils.createE("div"); とします。 div.className="ゲスト数"; div.innerHTML=`<span>人数は未定です</span><i></i> <div class="dropDownContainer なし" id="dropDownContainer"> <div class="dropDownItem クリアフィックス"> <span>各</span> <div class="dropDownSelect"> <div class="dropDownCont"><span id="adultNum">大人 2 名</span><i></i></div> <ul class="dropDownList" tag="大人">${this.setDropDownList("大人")}</ul> </div> <div class="dropDownSelect"> <div class="dropDownCont"><span id="childrenNum">0 人の子</span><i></i></div> <ul class="dropDownList" tag="children"><li>0</li>${this.setDropDownList("children")}</ul> </div> </div> <div class="dropDownItem clearfix none" id="ItemAge"></div> <div class="dropDownBottom clearfix"> ${this.state?'':'<em class="dropDownTips">リアルタイムの価格を確認できるように、まず日付を選択してください。 </em>'} ${this.state?'<a class="dropDownBtn" id="dropDownBtn" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" >確認</a>':'<a class="dropDownBtn disabled" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" >確認</a>'} </div> </div>`; // スタイルを設定します。スタイルは一度設定するだけでインスタンス化する必要がないため、静的メソッド Main.setStyles() が使用されます。 //要素を取得します Utils.getIdElem(div,this); //div のクリック イベントをリッスンします div.addEventListener("click",(e)=>this.guestsNumClickHandler(e)); //状態が true の場合、ドロップダウン ボックスはクリック イベントをリッスンします。if(this.state) this.dropDownContainer.addEventListener("click",e=>this.dropDownContainerClick(e)); //ドキュメントはクリック イベントをリッスンし、ドロップダウン ボックスを非表示にします。document.addEventListener("click",e=>this.documentClick(e)); div を返します。 } 親に追加{ Utils.appendTo(this.elem,parent); } guestNumClickHandler(e){ //ドロップダウン ボックスが表示状態の場合、繰り返し操作を回避するために直接ジャンプします if(!Utils.hasClass(this.dropDownContainer,"none")) return; // guestsNum がクリックされていない場合は、イベントのバブルを避けるために直接ジャンプします if(e.target.nodeName!=="SPAN"&&e.target.nodeName!=="I"&&!Utils.hasClass(e.target,"guestsNum")) return; //div にフォーカス スタイルを追加します Utils.addClass(this.elem,"focus"); //dropDownContainer を表示します Utils.removeClass(this.dropDownContainer,"none"); } dropDownContainerClick(e){ if(e.target.nodeName==="LI"){ // ul をクリックしてリストを選択します this.dropDownListClick(e); } そうでない場合(e.target.id==="dropDownBtn"){ //確認ボタンをクリックします this.dropDownBtnClick(); } そうでない場合(e.target.nodeName==="SPAN" || e.target.nodeName==="I") { //span または i タグをクリックすると、その親要素 div がパラメーターとして取得されます this.dropDownSelectClick(e.target.parentElement); } そうでない場合は(Utils.hasClass(e.target,"dropDownCont")){ //div 選択ボックスをクリックするときに、div をパラメーターとして使用します。this.dropDownSelectClick(e.target); } それ以外 { //ドロップダウン ボックスの他の位置をクリックすると、現在の ul リストが非表示になります if(this.listPrep) this.listPrep.style.display="none"; } } dropDownSelectClick(div){ //最後に表示された ul リストを非表示にします if(this.listPrep) this.listPrep.style.display="none"; //現在クリックされているulリストがthis.listPrepに割り当てられます this.listPrep = div.nextElementSibling; //現在クリックされている ul リストを表示します。this.listPrep.style.display="block"; } dropDownListClick(e){ //現在クリックされている ul のタグ属性値を取得します。let tag=this.listPrep.getAttribute("tag"); ユニットを「」にします。 スイッチ (タグ){ case "大人": unit="大人";break; 「子供」の場合: ユニット="子供"; txt=Number(e.target.innerText); とします。 //li の値に応じて、以下の年齢選択ボックスを自動的に作成します。this.setDropDownItemAge(txt); 壊す; case "age": unit="歳";break; } // 選択したリストの値を表示します。 this.listPrep.previousElementSibling.firstElementChild.textContent=e.target.innerText+" "+unit; //表示が完了したら、現在表示されている ul を非表示にします。this.listPrep.style.display="none"; } ドロップダウンアイテムの年齢を設定する(txt){ let str="<span>お子様の年齢</span>"; txt===0の場合{ // 0 の場合、年齢選択ボックスは表示されません this.ItemAge.style.display="none"; }それ以外{ this.ItemAge.style.display="ブロック"; //選択された値をループし、年齢選択ボックスを作成します for(let i=0;i<txt;i++){ str+=`<div class="dropDownSelect"> <div class="dropDownCont"><span><1 歳</span><i></i></div> <ul class="dropDownList" tag="年齢"><li><1</li>${this.setDropDownList("年齢")}</ul> </div>`; } this.ItemAge.innerHTML=str; } } dropDownBtnClick(){ // 選択したコンテンツを上部の選択ボックスに表示します。let resultStr=this.adultNum.innerText.replace(/\s/g,"")+" "+this.childrenNum.innerText.replace(/\s/g,""); this.elem.firstElementChild.textContent=結果Str; //ドロップダウンコンテナを非表示 this.dropDownContainerHide(); } ドキュメントクリック(e){ //イベントのバブルを回避if(e.target!==document.documentElement && e.target!==document.body) return; //ドロップダウンコンテナを非表示 this.dropDownContainerHide(); } ドロップダウンコンテナ非表示(){ //div は集約状態を削除します Utils.removeClass(this.elem,"focus"); //dropDownContainer は Utils.addClass(this.dropDownContainer,"none"); を非表示にします。 //現在表示されている ul リストを非表示にします if(this.listPrep) this.listPrep.style.display="none"; } setDropDownList(タイプ){ //ul ドロップダウン リスト コンテンツを作成します。let li=""; max=0 とします。 スイッチ(タイプ){ case "大人": max=8;break; case "children": max=5;break; ケース "age": max=18;break; } for(let i=1;i<max;i++){ li+="<li>"+i+"</li>"; } li を返します。 } 静的setStyles(){ Main.styles を返します。 main.style を true に設定します。 Utils.insertCss(".guestsNum",{ 幅:"108px", 高さ:"34px", パディング:"0px 12px", 境界線:"1px 実線 #ccc", 境界線の半径:"3px", 位置:"相対", フォントサイズ:"14px", 色:"#666", ユーザー選択:"なし", }) Utils.insertCss(".guestsNum.focus",{ 境界線の色:"#ffa800", ボックスシャドウ:"0 0 4px #ffa800" }) Utils.insertCss(".guestsNum>span",{ 行の高さ:"34px" }) Utils.insertCss(".guestsNum>i",{ 表示:"インラインブロック", 幅:"16px", 高さ:"16px", 背景画像:"url(./image/user.jpg)", フロート:"右", 余白:"8px 0px 0px 10px" }) Utils.insertCss(".dropDownContainer",{ 境界線: "1px 実線 #ffa800", 境界半径: "4px", ボックスシャドウ: "0 0 4px #ffa800", 背景色: "#fff", パディング: "20px 15px", 幅: "480px", フォントサイズ:"12px", 位置:"絶対", 左:"0px", 上:"35px", }) Utils.insertCss(".dropDownItem",{ マージン下:"12px" }) Utils.insertCss(".dropDownItem>span",{ 表示:"ブロック", 幅:"60ピクセル", 行の高さ:"28px", フロート:"左", }) Utils.insertCss(".dropDownSelect",{ 幅:"90ピクセル", 高さ:"30px", 右余白:"10px", フロート:"左", 位置:"相対" }) Utils.insertCss(".dropDownCont",{ 境界線:"1px 実線 #ccc", 境界線の半径:"3px", 高さ:"12px", パディング:"6px 8px 10px", }) Utils.insertCss(".dropDownCont>span",{ 表示:"インラインブロック", 幅:"53px", 高さ:"14px", 行の高さ:"14px", borderRight:"1px 実線 #ccc" }) Utils.insertCss(".dropDownCont>i",{ 表示:"インラインブロック", 幅:"0px", 高さ:"0px", 境界線:"5px 実線 #c6c6c6", borderColor:"#c6c6c6 透明 透明", マージン: "6px 0px 0px 4px", フロート: "右" }) Utils.insertCss(".dropDownList",{ リストスタイル:"なし", パディング:"0px", マージン:"0px", 幅:"88px", 最大高さ:"200px", オーバーフロー:"自動", カーソル:"ポインタ", 境界線:"1px 実線 #ccc", 背景色:"#fff", 境界線の半径:"4px", 位置:"絶対", 左:"0px", 上:"30px", zインデックス:"2", ボックスシャドウ: "1px 1px 3px rgba(0,0,0,.1)", 表示:"なし" }) Utils.insertCss(".dropDownList>li",{ 行の高さ:"28px", パディング左:"8px", }) Utils.insertCss(".dropDownList>li:hover",{ 背景:"#f4f4f4" }) Utils.insertCss(".dropDownBottom",{ borderTop:"1px 実線 #ccc", marginTop:"20px", パディング上部:"20px" }) Utils.insertCss(".dropDownTips",{ フォントスタイル:"通常", フォントサイズ: "12px", 色: "#ef523d", 行の高さ:"28px" }) Utils.insertCss(".dropDownBtn",{ テキストデコレーション:"なし", フロート: "右", 表示: "インラインブロック", パディング: "2px 22px", 背景色: "#ffb200", 境界半径: "4px", フォントサイズ: "14px", 行の高さ: "24px", 色: "#fff", }) Utils.insertCss(".dropDownBtn.disabled",{ 背景色: "#efefef", 色: "#999" }) Utils.insertCss(".clearfix:after",{ コンテンツ:"\"。\""、 表示:"ブロック", オーバーフロー:"非表示", 可視性:"非表示", クリア:"両方", 高さ:"0px" }) Utils.insertCss(".none",{ 表示:"なし" }) } } Utils.js ファイル: デフォルトクラス Utils をエクスポートする{ 静的createE(要素、スタイル、準備){ 要素 = document.createElement(要素); if(style) for(let prop in style) elem.style[prop]=style[prop]; if(prep) for(let prop in prep) elem[prop]=prep[prop]; 要素を返します。 } 静的appendTo(要素、親){ parent.constructor === String の場合、parent = document.querySelector(parent); 親要素に子要素を追加します。 } 静的ランダム数(最小値,最大値){ Math.floor(Math.random*(max-min)+min) を返します。 } 静的ランダムカラー(アルファ){ アルファ=アルファ||Math.random().toFixed(1); isNaN(alpha)の場合、alpha=1; アルファ>1の場合、アルファ=1; アルファ<0の場合、アルファ=0; col="rgba("; とします。 (i=0;i<3;i++) の場合{ col+=Utils.randomNum(0,256)+","; } col+=alpha+")"; 列を返します。 } 静的挿入Css(選択、スタイル){ document.styleSheets.length===0の場合{ styleS = Utils.createE("style"); とします。 Utils.appendTo(styleS,document.head); } styleSheet を document.styleSheets[document.styleSheets.length-1] とします。 str=select+"{"とします。 for(var prop in スタイル){ str+=prop.replace(/[AZ]/g,function(item){ "-"+item.toLocaleLowerCase() を返します。 })+":"+styles[prop]+";"; } str+="}" styleSheet.insertRule(str、styleSheet.cssRules.length); } 静的 getIdElem(要素,obj){ if(elem.id) obj[elem.id]=elem; if(elem.children.length===0) の場合、obj を返します。 for(let i=0;i<elem.children.length;i++){ Utils.getIdElem(elem.children[i],obj); } } 静的addClass(要素、クラス名){ arr=(elem.className+" "+className).match(/\S+/g);とします。 arr = arr.filter((item,index)=>arr.indexOf(item,index+1)<0) elem.className=arr.join(" "); } 静的removeClass(要素、クラス名){ if(!elem.className) 戻り値: arr = elem.className.match(/\S+/g); とします。 arr1=className.match(/\S+/g);とします。 arr1.forEach(item=>{ arr = arr.filter(t=>t!==item) }) elem.className=arr.join(" "); } 静的hasClass(要素、クラス名){ if(!elem.className) は false を返します。 arr = elem.className.match(/\S+/g); とします。 arr1=className.match(/\S+/g);とします。 解決しましょう; arr1.forEach(item=>{ res = arr.some(it=>it===item) }) res を返します。 } } 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Navicat がリモートで SQL Server に接続し、MySQL に変換する詳細な手順
>>: Linux の特別な権限 SUID、SGID、SBIT の詳細な説明
WindowsにMySQLの圧縮バージョンをインストールする方法の詳細については、以下を参照してくだ...
記述した Dockerfile の内容は次のとおりです。 Python:3.6.8 から pip i...
先日、外国人の方がHTML+CSSを使ってHamburgerMenuを実装している動画を見ました。最...
序文MySQL は、クライアント/サーバー構造に基づく、高速、高性能、マルチスレッドのオープン ソー...
1. SVNサーバーをインストールする yum でサブバージョンをインストール2. SVNバージョン...
<br />帯域幅の増加に伴い、Web ページ上のオブジェクトも増えているため、Web ...
スタイルシートCSS (カスケーディング スタイル シート) は、HTML Web ページを美しくす...
目次バインディングクラスインラインスタイルのバインディングバインディングクラス方法1:オブジェクト構...
目次1. はじめに2. 関数型プログラミングとは何ですか? 3. 純粋関数(関数型プログラミングの基...
FTP と SFTP はファイル転送プロトコルとして広く使用されています。関連する機能を開発するには...
Linuxシステムをお持ちでない場合は、ダウンロードとインストールについてはhttps://www....
コードをコピーコードは次のとおりです。 <本文> //マーキーの助けを借りて<MA...
1. JSON.stringify() と JSON.parse() の違い私たちは皆、JSON.s...
目次リスナー1.ウォッチエフェクト2.見る1.1 聴くための最初の方法1.2 聞く2つ目の方法1.3...
以下では、SQL クエリ ステートメントを使用して、Mysql データベース内のテーブルのテーブル名...