기능대회 장바구니 만들기

[최지영]

장바구니 검색이랑 드래그까지는 어찌저찌 완성 했는데..
만들고나서 선생님 코드랑 비교해보니까 제껀 엉망이네요 ㅜㅜ
done 이부분은 여러번 사용하면 안되는 거죠 선생님??
많이 심각하게 엉망인건지 이렇게 해도 되는건지도 궁금 합니다 ㅠㅠ

let 템플릿 = 0;
$.get('store.json').done(function(data) {
    data.products.forEach((a,i) => {
        템플릿 = `
        <div class="item" draggable="true" data-id="${a.id}">
        < img src="img/${a.photo}">
        <p class="p1">${a.title}</p>
        <p>${a.brand}</p>
        <p>가격 : ${a.price}</p>
        <button class="buy" data-id="${a.id}">구매</button>
        </div>
        `;

        $('.item-container').append(템플릿);
    });
    
})

function inputBox() {
    var inputValue = document.getElementById('inputValue').value;

    $.get('store.json').done(function(data){
        data.products.forEach((a,i) => {
        var 제목 = data.products[i].title;
        var 브랜드 = data.products[i].brand;
        var 포함 = 제목.match(inputValue);
        var 포함2 = "<span style=background-color:yellow;>" + 포함 + '</span>';
        var 브랜드포함 = 브랜드.match(inputValue);
        var 브랜드포함2 = "<span style=background-color:yellow;>" + 브랜드포함 + '</span>';
        var 교체 = 제목.replace(포함,포함2);
        var 브랜드교체 = 브랜드.replace(브랜드포함,브랜드포함2);

        if (포함 || 브랜드포함) {
            $('.item-container').html('');

            var 템플릿 = `
            <div class="item" draggable="true">
        < img src="img/${data.products[i].photo}">
        <p class="p1">${교체}</p>
        <p>${브랜드교체}</p>
        <p>가격 : ${data.products[i].price}</p>
        <button>구매</button>
        </div>
        `;
    
        $('.item-container').append(템플릿);   
        }
    
    })
    })
}

// ------------드래그 이벤트 -------------//
var 드래그템플릿 = 0;
let countadd = 1;
var idData;
$.get('store.json').done(function(data){
    data.products.forEach((a,i) => {
        $('.item').eq(i).on('dragstart',function(e) {
            e.originalEvent.dataTransfer.setData('id',e.target.dataset.id);
            idData = e.target.dataset.id;
        });
    
        $('.bg-container').eq(i).on('dragover',function(e) {
            e.preventDefault();
        });
        $('.bg-container').eq(i).on('drop',function(e) {
            e.preventDefault();
            let boxData = e.originalEvent.dataTransfer.getData('id');
            $('.bg-container').append(boxData);
            boxadd(boxData);
        });

        function boxadd(boxData) {
            var 드래그템플릿 = `
            <div class="drag-item-pick">
                < img src="img/${data.products[boxData].photo}">
                <p class="p1">${data.products[boxData].title}</p>
                <p>${data.products[boxData].brand}</p>
                <p>${data.products[boxData].price}</p>
                <div class="count">
                    <input placeholder="${countadd}" id="countid">
                </div>
            </div>
            `;
            $('.bg-item').eq(i).append(드래그템플릿);

        }     
    })
})

[codingapple]

잘돌아가면 다 맞는 코드입니다
json data가 계속 필요하면 처음 get요청한 결과를 변수에 저장해놓고 계속 써도 될듯요

[글쓴이]

글