[JavaScript] 2020년도 지방기능경기대회 과제(웹디자인 및 개발) 공부하기3

* 본 포스팅은 필자가 개인적으로 학습한 내용정리 및 리뷰를 위해 포스팅합니다.

---

// 드래그 받는 곳 함수
      function drop(ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("text"); // data = 끌고오는 객체의 아이디
        // 여기서 ev.target = drag-point 상자
        ev.target.append(document.getElementById(parseInt(data) + 4));
        $(`#${parseInt(data) + 4}`).css("display", "inline-block"); //장바구니 내의 객체 보이게하기
        var childrens = $(".drag-point").children(); //drag-poing에 하나씩 쌓인다
        for (var i = 0; i < childrens.length; i++) { 
          if (childrens[i].id == parseInt(data) + 4) { 
            //장바구니 내의 객체 아이디와 끌고오는 객체의 아이디+4의 값이 같다면 장바구니 내의 객체의 수량을 늘린다.
            $(`#${parseInt(data) + 4} > input`).attr("value", count[data]++);
          }
        }
        // 장바구니 내의 객체 가격을 추가할때 마다 합계에 가격을 더해준다.
        var result_price = $(`#${parseInt(data) + 4} :nth-child(4)`).html();
        price += parseInt(result_price);
        $(".result_form_price").html(price);
      }

▲ 앞서 숨겨 놓았던 객체들을 해당 id에 따라서 display를 inline-block처리해 준다.

장바구니 내의 객체 아이디와 끌고 오는 객체 아이디(+4)의 값이 같다면 장바구니 내의 객체 수량을 늘린다.

 

 

▼ 위의 코드를 구현하여 끌고오는것에는 성공하였지만 드래그했을 때 객체끼리 상자를 벗어나는 현상이 발생하여 담기 버튼을 누른 것과 같은 이벤트로 처리하였다.

// 드래그 받는 곳 함수
      function drop(ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("text"); // data = 끌고오는 객체의 아이디
        $('.plusbtn').eq(data).click();
      }

 

 

function find(list) {
        $(".input").on("input", function (e) {
          var 템플릿 = "";
          // list = store 데이터
          list.forEach((a, i) => {
            // 검색한 단어가 store데이터 이름이나 브랜드중 해당하는것이 있다면..
            if (
              list[i].title.includes(e.target.value) ||
              list[i].brand.includes(e.target.value)
            ) {
              var title = "";
              var title_word = "";
              var brand = "";
              var brand_word = "";
              title = list[i].title;
              brand = list[i].brand;
              // 만약 검색한 글자가 한글자 일 경우
              if (e.target.value.length < 2) {
                // 검색한 글자가 포함되어있는 제목의 길이만큼 반복
                for (var j = 0; j < title.length; j++) {
                  // 만약 포함되어있는 제목의 글자하나하나 중 검색한 글자가 같다면..
                  if (title.charAt(j) == e.target.value) {
                    // 겹치는 글자는 색을 노란색으로 표시해서 담아준다
                    title_word += `<span style="background : yellow">${e.target.value}</span>`;
                    // continue를 하지않으면 글자가 포함되는 글자가 겹친다
                    continue;
                  }
                  // 겹치지 않는 글자는 그냥 담아준다
                  title_word += title.charAt(j);
                }
                // 브랜드도 위와 같은 방식으로 분류
                for (var j = 0; j < brand.length; j++) {
                  if (brand.charAt(j) == e.target.value) {
                    brand_word += `<span style="background : yellow">${e.target.value}</span>`;
                    continue;
                  }
                  brand_word += brand.charAt(j);
                }
              } 
              // 한글자 이상인 경우
              else {
                // 이름과 브랜드 모두 포함되어 있는 경우
                if (
                  title.includes(e.target.value) &&
                  brand.includes(e.target.value)
                ) {
                  //검색한 글자를 바탕으로 이름을 잘라서 검색한 부분을 노란색으로 표시하고 붙인다.
                  title_word =
                    title.split(e.target.value)[0] +
                    `<span style="background : yellow">${e.target.value}</span>` +
                    title.split(e.target.value)[1];
                  brand_word =
                    brand.split(e.target.value)[0] +
                    `<span style="background : yellow">${e.target.value}</span>` +
                    brand.split(e.target.value)[1];
                  //이름만 포함되어 있는 경우
                } else if (title.includes(e.target.value)) {
                  title_word =
                    title.split(e.target.value)[0] +
                    `<span style="background : yellow">${e.target.value}</span>` +
                    title.split(e.target.value)[1];
                  brand_word = brand;
                  //브랜드만 포함되어 있는 경우
                } else if (brand.includes(e.target.value)) {
                  brand_word =
                    brand.split(e.target.value)[0] +
                    `<span style="background : yellow">${e.target.value}</span>` +
                    brand.split(e.target.value)[1];
                  title_word = title;
                }
              }

              템플릿 += `
              <div id="${list[i].id}" class="col"
                  draggable="true" ondragstart="drag(event)">
                <img src="${list[i].photo}" width="155px" height="100px" sytle=""/>
                <h5 id="title">${title_word}</h5>
                <p>${brand_word}</p>
                <h5>가격 : ${list[i].price}</h5>
                <button>담기</button>
              </div>`;
            }
            // 위에서 적용한 html을 class가 row에 저장
            $(".row").html(템플릿);
          });
        });
      }

▲ 넘겨 받은 데이터를 foreach문을 사용하여 반복한다. 그중 이름이나 브랜드에 해당되는 문자가 있다면 조건문에 따라 노란색으로 처리해 준다. 그 후 템플릿에 담아주고 row안에 넣어준다.

 

 

 

 

 

4에서 계속...