将上一个和下一个按钮添加到 li item php 或 jquery

Posted

技术标签:

【中文标题】将上一个和下一个按钮添加到 li item php 或 jquery【英文标题】:Add prev and next buttons to li item php or jquery 【发布时间】:2013-09-07 19:18:12 【问题描述】:

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

我希望能够在 li 项中添加上一个下一个按钮以访问列表中的上一个和下一个项目。列表项打开一个带有#example 的href 的jquery 模式。如何将 href 值添加到带查询的模式中的上一个和下一个按钮?还是我用 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">
                        &times;
                    </button><a href="" class="nextarrow">next</a>
                </div>
                <div class="modal-body">
                    ........
                </div>
            </div>';
        
        ?>

</div>

【问题讨论】:

提示:您可以在两个循环中使用相同的变量,不需要employee1employee2 【参考方案1】:

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

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');
);

Demo fiddle

【讨论】:

这部分工作。实时站点的主要问题是模态从显示的 dom 中删除,然后在关闭时重新插入到模态组中的最后一个元素下方,所以这有一些奇怪的行为。基本上第一次通过下一次点击一切正常,然后在关闭后订单全部混淆,不再与缩略图订单相关。 这是我的最终代码,效果很好。 $('.prev').click(function(e) e.preventDefault(); var modalId = $('.modal.in').attr('id'); var link = $("a.modalLink[href='#" + modalId + "']"); var prev = $(link); var previous = $(link.parent().prev().find('a.modalLink')); var previousId = $(previous).attr('href'); $('.modal').modal('hide'); $(previousId).modal('show'); );【参考方案2】:

你需要使用类似的javascript代码

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

您可以像 next_id = current_id + 1 一样填充 next_id。

【讨论】:

有没有办法在不硬编码 id 的情况下做到这一点

以上是关于将上一个和下一个按钮添加到 li item php 或 jquery的主要内容,如果未能解决你的问题,请参考以下文章

将自动播放 + 上一个和下一个按钮添加到滑块

Woocommerce:将基于键的类添加到'wc_display_item_meta'中的LI中

如何使用引导程序,jquery为选项卡制作上一个和下一个按钮?

上一个和下一个按钮(php和mysqli)不断收到500个内部服务器错误[重复]

工具栏上一个和下一个按钮逻辑

jquery如何实现点击LI标签和下面的LI互换顺序?