ブートストラップを取得する方法laravel 5のモーダルデータ

Question

私はforeachで配布しているデータのリストを持っています。そして、私はブートストラップモーダルで各データの詳細を取得したいと思います。

これは、これは私のモーダル

<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 

    <!-- Modal content--> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <h4 class="modal-title"></h4> 
     </div> 
     <div class="modal-body"> 
     <div class='row'> 
      <center> 
       <div class='col-md-12'> 
        <img class="modal-image"> 
       </div> 
      </center> 
      <div class='col-md-12'> 
       <p align='center' class="modal-poin"><b>Poin dibutuhkan</b></p> 
      </div> 
      <div class='col-md-12'> 
       <p align='justify' class="modal-desc">Deskripsi</p> 
      </div> 
     </div> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
    </div> 

    </div> 
</div> 

である私のコード

<div class="container bg-white" style="padding: 20px;"> 
     @foreach ($hadiah as $h) 
     <div class="col-md-6 rewards" > 
      <div class="rewards-box"> 
       <div class="img"> 
        <img class="imagePreview" src="https://admin.philipscontractorclub.com/uploads/rewards/{{$h->image}}"> 
       </div> 
       <div class="caption"> 
        <h3 class="title">{{$h->title}}</h3> 
        <p class="point_needed"><span class="fa fa-certificate"></span> {{$h->point_needed}}</p> 
        <p class="description">{{$h->description}}</p> 
        <button type="button" class="btn btn-info btn-lg detail-item" data-id="{{ $h->id }}" data-toggle="modal" data-target="#myModal">Buka</button> 
       </div> 
      </div> 
     </div> 
     @endforeach   
    </div> 

あり、これは結果が示すものではありません私のjavascript

<script type="text/javascript"> 
    $("body").on("click",".detail-item",function(){ 
     var id = $(this).data('id'); 
     var nama = $(this).find('title').text(); 
     var src = $(this).find('.imagePreview').attr('src'); 
     var poin = $(this).find('point_needed').text(); 
     var desc = $(this).find('description').text(); 
     $("#myModal").find(".modal-title").text(nama); 
     $("#myModal").find('.modal-image').attr('src', src); 
     $("#myModal").find(".modal-poin").text(poin); 
     $("#myModal").find(".modal-desc").text(desc); 
    }); 
</script> 

です。そして、私はボタンを助け

Answer 1

ため

感謝をクリックした場合、私は、各データの詳細を取得したいあなたの望ましい結果を得るためにjQueryので.parent()メソッドを使用する必要があります。これは、$(this)と言うときは、クリックされたボタンを指しているだけで、ボタンの子であることは.caption divではありません。

代わりにこのコードを実行してください。

$("body").on("click",".detail-item",function(){ 
    var id = $(this).data('id'); 
    var nama = $(this).parent().find('.title').text(); 
    var src = $(this).parent().parent().find('.imagePreview').attr('src'); 
    var poin = $(this).parent().find('.point_needed').text(); 
    var desc = $(this).parent().find('.description').text(); 

    // rest of you code here ... 
}); 

ボタンのそれは実際に「祖父」要素ので.imagePreviewの場合には、私は二回.parent()メソッドを呼び出していることに注意してください。

Please refer to the docs for more references.