我有使用 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>
这是我的模式
<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">×</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>
这是我的 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>
结果没有显示。如果我单击按钮,我想获取每个数据的详细信息
感谢帮助
最佳答案
您需要使用 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()
方法,因为它实际上是按钮的“祖父”元素。
关于javascript - 如何在 laravel 5 上获取 Bootstrap Modal 数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46438527/