선택시 필드 및 마우스 오버 이벤트

  <!--필드 추가 이벤트 /스크립트

  //필드 추가 리스트

  const myPopup = document.querySelector("#popup")

  const myPlus = document.querySelector("#fildPlus");

  let isShow = false;

  $("#fildContaner").on("click",function(){

      if(!isShow){

          console.log("false")

          let left = myPlus.getBoundingClientRect().left;

          let top = myPlus.getBoundingClientRect().top;

         

          myPopup.style.left = (left) +"px";

          myPopup.style.top = (top) +"px";

         

          myPopup.style.display = "block";

      }else{

          console.log("true")

          myPopup.style.display = "none";

      }

      isShow = !isShow;

  });

 

  //필드 추가

  $(".selectList").on("click",function(){

      let text = $(this).text();

      let result = "";

      let ex = "";

      console.log(text);

      switch(text){

          case '글자' :

              result = "text";

              ex = "글자를입력해주세요";

              break;

          case '숫자' :

              result = "number";

              ex = "숫자를입력해주세요";

              break;

          case '금액' :

              result = "number";

              ex = "금액을입력해주세요";

              break;

          case '날짜' :

              result = "date";

              ex = "날짜를선택해주세요";

              break;

          case '선택' :

              result = "checkbox";

              break;

          case '첨부파일' :

              result = "file";

              break;

          }

         

          let str = `<p>

              <input type='text' placeholder="이름을 입력해 주세요." style="border:none;" />

              <input type=\${result} style="border:none;" placeholder=\${ex} />

              </p>`

              $("#resultFild").append(str);

          });

                             

                             

  //마우스 오버 마우스 아웃

  $(".selectList").mouseover(function(){

      $(this).css("background-color","#0000002b");

  });

  $(".selectList").mouseout(function(){

      $(this).css("background-color","white");

  });

-->

<!-- /스타일

/*

#popup{

    display: none;

}

*/

-->

<!-- /HTML

<p id="fildContaner" style="padding-top: 20px; margin-bottom: 0px;">

    <input id="fildPlus" type="button" class="btn mb-2 btn-outline-dark" value="+">맞춤 필드 추가하기

</p>

    <div id="popup"> 맞춤필드 추가

    <div class="selectList"><span class="fe fe-24 fe-pen-tool" style="margin : 2px 5px 0px 3px;"></span>글자</div>

    <div class="selectList"><span class="fe fe-24 fe-italic" style="margin : 2px 5px 0px 3px;"></span>숫자</div>

    <div class="selectList"><span class="fe fe-24 fe-dollar-sign" style="margin : 2px 5px 0px 3px;"></span>금액</div>

    <div class="selectList"><span class="fe fe-24 fe-calendar" style="margin : 2px 5px 0px 3px;"></span>날짜</div>

    <div class="selectList"><span class="fe fe-24 fe-check-square" style="margin : 2px 5px 0px 3px;"></span>선택</div>

    <div class="selectList"><span class="fe fe-24 fe-folder-plus" style="margin : 2px 5px 0px 3px;"></span>첨부파일</div>

</div> -->