正在开发一个 Laravel 应用程序,其中我在数组中有一些数据。该数据是关联数组的集合,其中每个数组都有一个身份号码和一个策略代码集合。我正在获取数据并显示到 Blade 上。在 View 中,我已分区为2 列(使用 Bootstrap 网格系统)。在左列 (col-md-4) 中循环遍历变量并显示工作正常的身份号码。在右栏中,我有一个表,应根据identity_no的状态显示相应的策略代码。
我想实现一项功能,当用户单击或将鼠标悬停在特定身份号码上时,相应的策略代码应显示在表 tbody 标记的右列 (col-md-8) 上。对于后续的身份号码应重复相同的操作(仅应在单击或悬停身份号码后显示)。
存储在名为 asm 的变量中的数组集合
array:1 [▼
0 => array:2 [▼
"identity_no" => "71360"
"policy_code" => array:2 [▼
0 => "IL2***********"
1 => "IL2***********"
2 => "IL2***********"
]
]
1 => array:2 [▼
"identity_no" => "68181"
"policy_code" => array:3 [▼
0 => "IL2**********"
1 => "IL2***********"
2 => "IL2***********"
3 => "IL2***********"
]
]
2 => array:2 [▼
"identity_no" => "53983"
"policy_code" => array:4 [▼
0 => "IL2*************"
1 => "IL2*************"
2 => "IL2*************"
3 => "IL2*************"
4 => "IL2*************"
5 => "IL2*************"
]
]
]
View 上的布局
<div class="row">
<!-- lEFT column -->
<div class="col-md-4">
<div id="MainMenu">
<div class="list-group panel">
<!-- Level 1 -->
@foreach($asm as $a)
<a href="#" class="list-group-item list-group-item-primary" > Identity No: {{ $a['identity_no'] }} </a>
@endforeach
<!-- END level 1-->
</div>
</div>
</div>
<!-- END left column-->
<!-- Right column-->
<div class="col-md-8">
<table id="summary-table">
<thead>
<tr>
<th>Policy Codes</th>
</tr>
</thead>
<tbody>
<tr>
<td> <!-- Add dynamic policy codes--></td>
</tr>
</tbody>
</table>
</div>
最佳答案
你可以这样做(在我的本地测试并发现它有效):
<script>
var data;
$( document ).ready(function() {
data = {!! json_encode($asm) !!};
});
$(document).on("mouseenter", "a", function() {
var policyCodes = '';
var identityNo = $(this).attr('id');
for(var i = 0; i < data.length; i++) {
if(identityNo == data[i]['identity_no']) {
for(var j = 0;j < data[i]['policy_code'].length;j++){
policyCodes += '<td>' + data[i]['policy_code'][j] + '</td>';
}
}
}
console.log(policyCodes);
$('#summary-table tbody tr').html(policyCodes);
});
</script>
@foreach($asm as $a)
<a href="#" class="list-group-item list-group-item-primary" id="{{ $a['identity_no'] }}" > Identity No: {{ $a['identity_no'] }} </a>
@endforeach
希望有帮助:)
关于javascript - 使用 Javascript 在 Laravel Blade View 中显示数组中的动态数据时出现问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54017565/