jquery 데이터를 카드에 따라 / 개별적으로 채우는 방법은 무엇입니까?

마커스 찬

저는 Laravel 프레임 워크를 처음 접했고 부트 스트랩 카드를 사용하여 간단한 자동차 목록 웹을 개발하려고합니다. Jquery append () 메서드를 사용하여 Controller에서 데이터를 채우는 것을 포함하여 AJAX Get을 성공적으로 구현했습니다. 그러나 그것은 하나의 모든 자동차를 표시합니다 Card. 각 자동차를 포함하는 각 카드를 채우는 방법?. 현재 결과 console.log 결과

public function GetCars(Request $request)
    {
        if ($request->ajax())
        {
            $cars = Car::all();

            return response()->json( $cars );
        }
 }
   <div class="album py-1">
        <div class="container bg-light">
            <div class="row py-2">
                    <div class="col-md-3">
                        <div class="card mb-3 shadow-sm">
                            <div class="hover-container">
                                        <img src="" class="image img-thumbnail">
                                        <a class="Viewbtn text-decoration-none" href="#" style="font-size: small">View</a>
                            </div>
                            <div class="card-body CarDetail">
                                <p class="card-text font-weight-bold">Make:<span class="car_Make"></span></p>
                                <p class="card-text font-weight-bold">Model:<span class="car_Model"></span></p>
                                <div class="d-flex justify-content-between align-items-center">
                                    <p class="font-italic table_data">Price: RM <span class="car_Year"></span></p>
                                </div>
                            </div>

                        </div>
                    </div>
            </div>
        </div>
    <button id="testbtn" type="submit" class="btn btn-success">AJAX</button>
    </div>


    <script>
        $(document).ready(function(){
            $('#testbtn').click(function () {
              $.ajax({
                  type: 'GET',
                  url: '/ajax/getCar',
                  success : function (data) {
                      $.each(data, function( i, car ) {
                          $('.car_Make').append(car.make);
                          $('.car_Model').append(car.model+'<br>');
                          $('.car_Year').append(car.year+'<br>');
                      });
                  }
              });
        });
        });
    </script>
발렌틴 에밀 쿠 델쿠

이것이 무슨 뜻입니까?

console.log 데이터에서 일부 행을 사용하는 예제를 만들었습니다.

설명 : 데이터 배열을 반복하고 있습니다. 첫 번째 반복 인 경우 데이터를 추가합니다 ( CarDetail코드에 하나의 div가 있습니다.

다음 반복을 위해 CarDetaildiv를 복제하고 다음 데이터로 채 웁니다.

물론 페이지에 데이터를 추가하는 방법에는 더 많은 가능성이 있습니다. 예를 들어, 페이지의 첫 번째 항목을 채운 다음 두 번째 항목에서 마지막 항목까지 반복하거나 (이 경우 if / else 조건이 필요하지 않음) JS 변수에 HTML 코드를 추가 할 수 있습니다. 개인적으로 그렇게하지 않을 것입니다. 왜냐하면 매우보기 흉하고 코드의 가독성이 더 나빠질 수 있기 때문입니다.

$(document).ready(function(){
  var data = [
   {id:31,make:"Audi",model:"R8",year:2000},
   {id:32,make:"Ferrari",model:"FF",year:2000},
   {id:33,make:"Mazda",model:"Rx-7",year:2000},
   {id:34,make:"Ferrari",model:"F12",year:2012},
   {id:35,make:"Porsche",model:"911",year:2015},
   {id:36,make:"Land Rover",model:"Vogue",year:2015},
   {id:37,make:"Mercedes Benz",model:"SL350",year:2013},
   {id:38,make:"Ferrari",model:"F12",year:2013},
   {id:39,make:"Ferrari",model:"458",year:2013},
  ];
  
 	$.each(data, function( i, car ) {
    if(i == 0) {
      $('.card').find('.car_Make').text(car.make);
      $('.card').find('.car_Model').text(car.model);
      $('.card').find('.car_Year').text(car.year);
    } else {
      var carDetailCloned = $('.card').first().clone();
      carDetailCloned.find('.car_Make').text(car.make);
      carDetailCloned.find('.car_Model').text(car.model);
      carDetailCloned.find('.car_Year').text(car.year);
      
      $('.card-container').append(carDetailCloned); 
    }
  });
});
.CarDetail{background-color:red;margin-bottom:2em}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="album py-1">
  <div class="container bg-light">
    <div class="row py-2">
      <div class="col-md-3 card-container">
        <div class="card mb-3 shadow-sm">
          <div class="hover-container">
            <img src="" class="image img-thumbnail">
              <a class="Viewbtn text-decoration-none" href="#" style="font-size: small">View
              </a>
          </div>
          <div class="card-body CarDetail">
            <p class="card-text font-weight-bold">Make:
              <span class="car_Make"></span>
            </p>
            <p class="card-text font-weight-bold">Model:
              <span class="car_Model"></span>
            </p>
            <div class="d-flex justify-content-between align-items-center">
              <p class="font-italic table_data">Price: RM 
                <span class="car_Year"></span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <button id="testbtn" type="submit" class="btn btn-success">AJAX</button>
</div>

편집 :<div class="card mb-3 shadow-sm" 모든 카드에 대해 복제 하고 거기에 데이터를 추가 하도록 코드를 편집 했습니다. 또한 card-container새 차를 추가 할 때 사용하기 위해 부모 요소에 클래스를 추가합니다. 충분합니까?

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

SQL : 조건에 따라 이전 행 값으로 빈 셀을 채우는 방법은 무엇입니까?

Rails 점수에 따라 별을 채우는 방법은 무엇입니까?

스피너 데이터에 따라 listview를로드하는 방법은 무엇입니까?

사용자의 요청에 따라 데이터를 로드하는 방법은 무엇입니까?

jquery-드롭 다운 / 선택 / 콤보 상자를 동적으로 채우는 방법은 무엇입니까?

데이터의 조건에 따라 mysql에서 열을 채우는 방법은 무엇입니까?

데이터의 조건에 따라 mysql에서 열을 채우는 방법은 무엇입니까?

Pandas에서 월별 데이터를 주간 데이터로 채우는 방법은 무엇입니까?

별도의 시퀀스 배열에 따라 인라인 키로 데이터 개체를 참조하는 가장 좋은 방법은 무엇입니까?

JQuery에서 동적 값으로 <select> 요소를 채우는 방법은 무엇입니까?

Java의 입력 데이터 순서 / 이름에 따라 다른 setter 메서드를 동적으로 호출하는 방법은 무엇입니까?

다른 열의 변수에 따라 열의 값 합계를 개별적으로 얻는 방법은 무엇입니까?

두 개의 다른 열에 설정된 일부 조건에 따라 Pandas 데이터 프레임의 열을 채우는 방법은 무엇입니까?

JQuery로 HTML 요소에서 라이브 데이터를 얻는 방법은 무엇입니까?

조건에 따라 데이터 프레임에 승수를 적용하는 방법은 무엇입니까?

조건에 따라 적용 할 데코레이터를 선택하는 방법은 무엇입니까?

날짜에 따라 Gmail에서 다른 시트로 데이터를 보내는 방법은 무엇입니까?

시간에 따라 데이터를 플로팅하는 방법은 무엇입니까?

텍스트 길이에 따라 UITextView 높이를 동적으로 만드는 방법은 무엇입니까?

Firestore에서 Google 클라우드 기능으로 데이터를 가져 오는 방법은 무엇입니까?

Sling에서 Jquery로 데이터를 읽는 방법은 무엇입니까?

java8을 사용하여 파티션별로 카산드라에서 데이터를 로드/읽는 방법은 무엇입니까?

카산드라에 데이터를로드하는 데 더 좋은 도구는 무엇입니까?

값에 따라 ng-src를로드하는 방법은 무엇입니까?

카메라가 2 개의 물체를 따라 가도록 만드는 방법은 무엇입니까?

API의 길이에 따라이 컨테이너를 플러터로 만드는 방법은 무엇입니까?

속한 그룹에 따라 노드를 동적으로 색칠하는 방법은 무엇입니까?

R에서 여러 데이터 프레임을 개별적으로 rbind하는 방법은 무엇입니까?

드롭 다운 선택에 따라 라디오 버튼으로 데이터를 표시하는 방법은 무엇입니까?

TOP 리스트

  1. 1

    C # 16 진수 값 0x12는 잘못된 문자입니다.

  2. 2

    Matlab의 반복 Sortino 비율

  3. 3

    Python의 csv 파일에서 첫 번째 열 삭제

  4. 4

    개체 참조가 개체의 인스턴스로 설정되지 않았습니까? (예외 오류 ~ ASP.NET MVC)

  5. 5

    atob은 인코딩 된 base64 문자열을 디코딩하지 않습니다.

  6. 6

    EventEmitter <string>의 컨텍스트 'this'가 Observable <string> 유형의 'this'메서드에 할당되지 않았습니다.

  7. 7

    병합 셀을 사용하여 워크 시트의 데이터 필터링

  8. 8

    PhpStorm 중단 점에서 변수 값을 볼 수 없습니다.

  9. 9

    jQuery에서 이벤트 핸들러를 제거하는 가장 좋은 방법은 무엇입니까?

  10. 10

    `@ Transactional`이 있음에도 불구하고 이러한 데이터베이스 수정 사항이 롤백되지 않는 이유는 무엇입니까?

  11. 11

    ssh를 사용하여 원격에서 로컬로 파일 복사

  12. 12

    종속 사용자 정의 Lightning 선택 목록 Level2 및 Level3을 설정한 다음 Lightning 구성 요소에서 Level2를 재설정하지만 Level2 캐시 데이터가 저장됨

  13. 13

    2 개의 이미지를 단일 평면 이미지로 결합

  14. 14

    팝업처럼 위젯을 표시하는 방법

  15. 15

    [해결] 쿠키 설정 SameSite = Chrome / JSP, JAVASCRIPT에서 작동하지 않습니다.

  16. 16

    버튼 클릭을 기반으로 특정 CSS 클래스를 추가하는 방법은 무엇입니까?

  17. 17

    React 구성 요소가 자동으로 초기 상태로 다시 렌더링됩니다.

  18. 18

    연결된 서버 쿼리는 작동하지만 동일한 OPENQUERY는 "sys.servers에서 서버 'SERVER'를 찾을 수 없습니다.

  19. 19

    파일 2의 파일 1에서 동일한 줄을 조건으로 바꿉니다.

  20. 20

    아이디어 Intellij : 종속성 org.json : json : 20180813을 찾을 수 없음, maven에서 org.json 라이브러리를 가져올 수 없음

  21. 21

    상황에 맞는 메뉴 색상

뜨겁다태그

보관