0

我有一个通过 php 填充 li 元素的 ul。

我希望能够在 li 项目中添加上一个下一个按钮以访问列表中的上一个和下一个项目。列表项打开一个带有#example 的href 的jquery 模式。如何将 href 值添加到带查询的模式中的上一个和下一个按钮？还是我用 php.ini 添加它们。

<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">
                        &times;
                    </button><a href="" class="nextarrow">next</a>
                </div>
                <div class="modal-body">
                    ........
                </div>
            </div>';
        }
        ?>

</div>
4

2 回答 2

2

为所有“上一个”链接添加一个公共类，为所有“下一个”链接添加另一个类，如果您摆脱容器列表，也更容易找到下一个/上一个模式：

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">
                    &times;
                </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');
});

演示小提琴

于 2013-09-08T00:17:07.453 回答
0

您需要使用 javascript 代码，例如

function showNext(){
    $('#current_id').modal('hide');
    $('#next_id').modal('show');
}

你可以像这样填充 next_id next_id = current_id + 1。

于 2013-09-07T19:30:51.217 回答