예제관련 질문

[우주]

안녕하세요, 예제를 풀어보고 있는데, 
답안을 보고 검색을 해봐도 막히는 부분이 생겨 질문드립니다. 

1. 드래드앤드롭 기능이 계속 작동하지 않습니다. (콘솔창에 오류는 따로 뜨지 않고 그냥 작동하지 않습니다.)

2. '담기'버튼을 눌러 상품을 장바구니에 넣고, 장바구니에서 수량을 input으로 바꾼 뒤 
  다시 다른 상품을 '담기' 버튼을 이용해 담으면, input으로 바꾼 수량이 1로 초기화 됩니다. 어떻게 해야 이 오류가 없어질까요?

//===========================
//상품게시

let products = [] // 전역 변수로 선언
let cart = []

// 상품 게시 함수 
let 상품게시 = function(n){
  $('.photo-set').html(''); // 기존 콘텐츠 초기화

  n.forEach(function(a, index) { // index를 활용해 고유 ID 부여
    let 개별상품 =
    `<div id="item-${index}" class = "개별상품" draggable="true" data-id="${a.id}">
      < img src="필요한파일/${a.photo}" class="photo" alt="상품 사진">
      <h4>${a.title}</h4>
      <p>${a.brand}</p>
      <h6>가격 : ${a.price}</h6>
      <button class="담기" data-id="${a.id}">담기</button>
    </div>`; 
    
    $('.photo-set').append(개별상품);// 콘텐츠 추가
  })
}

// GET 요청을 통해 로컬 JSON 파일에서 데이터 가져오기
$.ajax({
  url: '필요한파일/store.json',  // JSON 파일의 경로
  type: 'GET', // HTTP 메서드
  dataType: 'json', // 반환 데이터 타입
  
  success: function(data){// JSON 데이터가 성공적으로 로드되었을 때 처리'
    console.log(data);
    products = data.products;
    상품게시(products); // 페이지 로드시 상품게시
  }
  
})

//========================
//담기버튼

$('.photo-set').on('click', '.담기', function(e){
  // 클릭된 담기 버튼의 data-id 값을 가져오기

  let 선택상품id = e.target.dataset.id;
  
  let 중복인가 = cart.findIndex(function(a){ return a.id == 선택상품id})
  //findIndex()는 배열에서 주어진 조건에 맞는 첫 번째 요소의 인덱스를 반환, 조건을 만족하는 요소가 없으면 -1을 반환

  if (중복인가 == -1){
    let 선택상품 = products.find(function(a){ return a.id == 선택상품id});
    선택상품.count = 1;
    cart.push(선택상품);
  } else {
    cart[중복인가].count++;
  }

  드래그구역업데이트();
  가격계산();

  // 수량 직접 입력시 가격 변경...
  $('.수량').on('input', function () {
    가격계산();
  });
})

let 드래그구역업데이트 = function(){

  // ??input으로 수량 변경된 상품이 있을 경우, 어떻게 해야 수량 초기화가 안될까?
  
  $('.드래그구역').html('');

  cart.forEach(function(a) {
  // 카트에 담긴 상품들만 표시
    if (a) {
      $('.드래그구역').append(
        `<div class="개별상품">
          < img src="필요한파일/${a.photo}" class="photo" alt="상품 사진">
          <h4>${a.title}</h4>
          <p>${a.brand}</p>
          <h6>가격 : ${a.price}</h6>
          <input type="number" value="${a.count}" min="0" class="수량" > 
        </div>`
      )//value는 입력필드의 초기값
    }
  });
}

//===================
//드래그로 장바구니에 추가기능... 왜 안되는거야 ?

$('.개별상품').on('dragstart', function(e){
  e.originalEvent.dataTransfer.setData('id', e.target.dataset.id);
  //드래그 시작시, data-id 값을 dataTransfer.setData('id', ...)로 저장
})

$('.드래그구역').on('dragover', function(e){
  e.preventDefault(); //드래그구역에 드래그된 항목을 올려놓을 수 있게 허용
})

$('.드래그구역').on('drop', function(e){
  e.preventDefault(); // 기본 동작 방지

  let 드래그상품id = e.originalEvent.dataTransfer.getData('id');
  console.log(드래그상품id);
  //드롭할 때, e.originalEvent.dataTransfer.getData('id')는 드래그된 데이터에서 'id'라는 이름으로 저장한 값을 가져오는 코드. 드래그를 시작할 때 설정한 data-id 값
  
  // $('.photo-set').eq(드래그상품id).click();
  //$('.photo-set').eq(선택상품id).click();는 선택상품id 인덱스에 해당하는 .photo-set 클래스의 요소를 찾아서 그 버튼을 클릭하는 동작을 강제로 실행하는 코드

  if (드래그상품id) {
    let 중복인가 = cart.findIndex(function (a) {
      return a.id == 드래그상품id;
    });

    if (중복인가 == -1) {
      let 선택상품 = products.find(function (a) {
        return a.id == 드래그상품id;
      });
      선택상품.count = 1;
      cart.push(선택상품);
    } else {
      cart[중복인가].count++;
    }

    드래그구역업데이트();
    가격계산();
  }

})
       

// 총가격 안내

let 가격계산 = function(){
  let 총가격 = 0

  // cart.forEach(function(a){
  //   총가격 += a.count*a.price;//+= 연산자를 사용해 각 상품의 count * price 값을 총가격에 누적
  // }) --> 이렇게 하면 담기 버튼 누른 상품만 계산됨...ㅠㅠ

  for (let i = 0; i < $('.수량').length; i++) {
    var count = $('.수량').eq(i).val();
    var price = $('.수량').eq(i).siblings('h6').text().replace(/[^0-9]/g, '');//replace(/[^0-9]/g, '')는 정규식을 사용하여 텍스트에서 숫자가 아닌 모든 문자를 제거
    총가격 += parseFloat(price * count);
  }

  $('#합계').text(총가격);
}

//===========================
//검색기능 
   

$('.검색창').on('input', function() {
  let 검색어 = $('.검색창').val().trim(); // 검색어 가져오기 및 공백 제거

  // 검색어와 일치하는 상품 필터링
  let 검색후 = products.filter(function(a) {
    return a.title.includes(검색어)|| a.brand.includes(검색어); // 부분 검색 지원
  });

  if (검색어 === "") {
    // 검색어가 없을 경우 모든 상품 표시
    상품게시(products);
  } else if (검색후.length > 0) {
    // 검색 결과가 있을 경우 게시
    상품게시(검색후);
  } else {
    // 검색 결과가 없을 경우
    $('.photo-set').html('<p>검색 결과가 없습니다.</p>');
  }
    
  //4. 진열된 상품들 제목부분에서 검색어 찾아서 노란색 배경 넣기
      //jQuery로 여러개 찾은건 each반복문 붙여야 잘됨

  $('.photo-set h4').each(function (i, html요소) { //i는 반복되는 각 요소의 인덱스(0부터 시작)이고, html요소는 반복되는 각 h4 요소 자체
    let title = html요소.innerHTML; //각 검색된 상품타이틀의 내용(글자) 가져와서
    title = title.replace(검색어, `<span style="background : yellow">${검색어}</span>`);//노란색으로 바꾸고
    html요소.innerHTML = title; //바뀐 글자를 재할당
  })

});

[codingapple]

드롭했을 때 드래그상품id 같은건 잘 나오는지 html 생성해주는 코드는 실행되는지 출력해봅시다
input을 변경할 때 마다 그 내용을 cart 변수에도 반영하면 될듯요

[글쓴이]

글