• 로그인
  • 장바구니에 상품이 없습니다.

home2 게시판 JavaScript, TS 게시판 (실전) 웹개발 기능대회 예제 코드 작성중 질문

(실전) 웹개발 기능대회 예제 코드 작성중 질문

4 글 보임 - 1 에서 4 까지 (총 4 중에서)
  • 글쓴이
  • #13253

    재하
    참가자

    예제를 보며 코드를 작성하던 중, 질문이 생겨서 글 남깁니다.

     다름이 아니라,  모든 상품 리스트를 보면, 가로로 정렬이 되어있는데,  해결책을 찾지 못했습니다. 현재 상태는 이미지 첨부하였으며, 코드는 다음과 같습니다.

    products를 ajax로 불러오기보다, 선언해놓고 틀을 만들고 ajax를 사용하려고 다음과 같이 코드를 작성하였습니다.

    <script>에는 다음과 같은 코드가 있습니다.

    products.forEach(function(a) {
            var template = 
            `<div class="item">
               <div class="item-body">
                 <h5 class="title">${a.product_name}</h5>
                 <p class="price">${'금액 : ' + a.price}</p>
               </div>
            </div>`
            $('.item-list').append(template)
          })

    <body>태그에는 다음과 같은 코드를 작성하였습니다.

    <div class = "context container">
          <div class = "item-list">
            <h3>모든 상품 리스트</h3>
          </div>
          <div id = 'basket'>
            <h3>장바구니</h3>
          </div>
        </div>

    item-list에 template를 추가해주며 가로정렬을 원하였지만, 세로로 정렬되었습니다. 답변 기다리고 있겠습니다. 감사합니다!현재 다음과 같이 세로정렬이 되어있음.

    #13256

    codingapple
    키 마스터

    class="item" 이게 세로로 정렬되는 css 속성을 가진게 아닐까요 

    float 혹은 flex 이런걸 부여하도록 합시다 

    #13292

    재하
    참가자

    이것은 잘 해결했습니다.. 검색기능 도중에 다시 질문이 생겨서 댓글 남깁니다..

     

    검색기능의 id를 search로 하였고,  검색 기능을 사용하면 empty()를 이용해서 비워주고, ajax를 하여서 $('input').val()과 일치하는 단어가 있으면 새상품에 return을 하고자 하는데, inArray는 있는지 여부를 판단해버리고, indexOf는 위치를 판단합니다.. 검색을 해도 못찾겠습니다.. 어떤 식으로 검색을 하면 좋을지, 어떤 함수를 사용해야 products_name과 부분적으로 일치하더라도 return을 할 수 있을까요?

     $('#search').on('change', function() {
            $('.item-list').empty()
            $.ajax({
              url : './store.json',
              type : 'GET'
            }).done(function(data){
              var 새상품 = data.products.filter(function(a){
                return $('input').val()
              })
              console.log(새상품)

     

    임시 코드는 다음과 같습니다. console로 새상품이 어떤것이 출력되는지를 찍어보고 있었습니다.

    #13296

    codingapple
    키 마스터

    indexOf 쓰면 이 문자가 저 문자에 있으면 위치를 알려주는데 이걸로 검색하시면 될듯요 

    위치가 0 이상이면 찾은 것이고 

    -1이면 못찾은 것으로 판정하면 될듯요 

     

    근데 페이지 로드시 ajax로 데이터를 불러올텐데

    그걸 변수에 저장해서 쓰시면 ajax 요청을 또 할필요는 없습니다 

4 글 보임 - 1 에서 4 까지 (총 4 중에서)
  • 답변은 로그인 후 가능합니다.

About

현재 월 700명 신규수강중입니다.

  (09:00~20:00) 빠른 상담은 카톡 플러스친구 코딩애플 (링크)
  admin@codingapple.com
  이용약관
ⓒ Codingapple, 강의 예제, 영상 복제 금지
top

© Codingapple, All rights reserved. 슈퍼로켓 에듀케이션 / 서울특별시 강동구 고덕로 19길 30 / 사업자등록번호 : 212-26-14752 온라인 교육학원업 / 통신판매업신고번호 : 제 2017-서울강동-0002 호 / 개인정보관리자 : 박종흠