Javascript 如何在laravel 5上获取引导模式数据

我有我与foreach一起分发的数据列表。我想通过引导模式获得每个数据的详细信息

这是我的密码

<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>

@foreach（哈迪亚为$h）
图像}}“>
{{$h->title}
{{$h->point_needed}
{{{$h->description}
布卡
@endforeach

这是我的情态

<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>

&时代；

结果没有显示任何内容。如果单击按钮，我希望获得每个数据的详细信息

---

感谢您的帮助

您需要在jQuery中使用

.parent（）

方法来获得所需的结果。这是因为当您说

$（this）

时，您只是指已单击的按钮，而不是指按钮所属的整个

.caption

div

请尝试执行此代码

<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>

注意，对于

.imagePreview

，我调用了两次

.parent（）

方法，因为它实际上是按钮的“祖父”元素

---

谢谢，很好用。我忘了在find（'title'）中键入“.”。text（）

$("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 ...
});