ドロップダウンボックス選択コンポーネントを実装するためのネイティブ js

この記事の例では、ドロップダウンボックス選択コンポーネントを実装するためのjsの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

機能要件:

1. div をクリックすると、div にフォーカス状態が表示され、同時にドロップダウンボックスの内容が表示されます。
2. 子供の人数を選択した後、子供の数が 0 より大きい場合は、対応する子供の年齢の選択ボックスが下に表示されます。
3. 大人の数の選択範囲は1〜7、子供の数の選択範囲は0〜4、子供の年齢の選択範囲は1未満、1〜17です。
4. 確認ボタンをクリックすると、選択した大人と子供の数が上部の div に表示されます。
5. 選択ボックスがクリック可能かどうかを制御できます。
6. ul リストが表示されたら、別の ul リストをクリックして前の ul リストを非表示にします。
7. 非表示ボックスをクリックすると、バインドされたイベント要素を除く表示されている ul リストが非表示になります。
8. ページ上の空白の位置をクリックすると、ドロップダウンボックスの内容全体が非表示になります。

ドロップダウンボックスが操作できない場合の表示ステータス:

ドロップダウンボックスが操作可能な場合:

お子様の人数を選択すると、対応するお子様の年齢選択ボックスが下に表示されます。

確認ボタンをクリックすると、上の 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 を応援していただければ幸いです。

以下もご興味があるかもしれません: