我有一个ul通过php填充li元素。
我希望能够在li项目中添加prev next按钮来访问列表中的prev和next项目。列表项打开一个jquery模式,其href为#example。如何使用查询将href值添加到模态中的prev和next按钮?或者我用php添加它们。
<div id="gallery">
<ul class="gallery">
<?php
foreach ($employees as $employee1) {
echo '<li>
<a href="#' . $employee1[0] . '" data-toggle="modal" class="modalLink"><img src="assets/img/' . $employee1[0] . '.jpg"/></a>
</li>';
}
?>
</ul>
</div>
<div id="modals">
<?php
foreach ($employees as $employee2) {
echo '
<div id="' . $employee2[0] . '" class="modal hide fade container" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-header">
<a href="">prev</a>
<button type="button" data-dismiss="modal" aria-hidden="true">
×
</button><a href="" class="nextarrow">next</a>
</div>
<div class="modal-body">
........
</div>
</div>';
}
?>
</div>
答案 0 :(得分:2)
为所有“prev”链接添加一个公共类,为所有“next”链接添加另一个类,如果你摆脱容器列表,也更容易找到next / prev模式:
<强> HTML 强>
<div id="modals">
<?php
foreach ($employees as $employee2) {
echo '
<div id="' . $employee2[0] . '" class="modal hide fade container" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-header">
<a href="#" class="prev">prev</a>
<button type="button" data-dismiss="modal" aria-hidden="true">
×
</button>
<a href="#" class="next">next</a>
</div>
<div class="modal-body">
........
</div>
</div>';
}
?>
</div>
现在你可以做这样的事情,所以你不需要对id的引用:
<强>的jQuery 强>
$('.prev').click(function(){
$(this).closest('.modal').modal('hide').prev('.modal').modal('show');
});
$('.next').click(function(){
$(this).closest('.modal').modal('hide').next('.modal').modal('show');
});
<强> Demo fiddle 强>
答案 1 :(得分:0)
您需要使用
等javascript代码function showNext(){
$('#current_id').modal('hide');
$('#next_id').modal('show');
}
你可以像next_id = current_id + 1
那样填充next_id。