javascript 向 Bootstrap 添加下一个和上一个按钮以确定链接ID

3vpjnl9f 于 2023-06-04 发布在 Java

关注(0)|答案(1)|浏览(390)

我试图添加下一个/上一个，然后滑动事件到一个引导模式的图像画廊。缩略图显示在一个网格中，所以当我尝试closest()，siblings()和next()时，我只能转到同一列中的上下图像，而不能转到网格中的其他列。
每个缩略图都有一个id，其中包含数据库中的图像ID。即：

<a class="image-gallery-item" id="img-1002" href="#showImageModal" data-toggle="modal" onclick="..."><img src="..." /></a>
<a class="image-gallery-item" id="img-4664" href="#showImageModal" data-toggle="modal" onclick="..."><img src="..." /></a>

每个链接都将图像的src、标题和ID传递给一个函数，该函数会改变模式中显示的信息。所有的工作正常，我只是不能得到下一个/上一个工作时，试图触发下一个项目。
理想情况下，不使用next()和closest()和sibling()方法，我希望只针对ID大于当前ID的第一个next和小于当前ID的第一个previous，如果元素存在，则触发单击。
谢谢

更新

根据@Ersian的建议，我创建了一个数组，并通过索引循环图像。他们仍然是按列前进，但至少他们会在后面移动到下一列。我觉得这会给用户带来一点困惑，他们希望图像在进入下一行缩略图之前从左到右显示。

$('.image-gallery-item').modal('hide');
            setTimeout(function () {
                var thisIMG = $("#imgid").html();

                var imgs = document.getElementsByClassName("image-gallery-item");
                var $imgvalues = Array.prototype.map.call(imgs, function (el) {
                    return el.id;
                });

                index = $imgvalues.indexOf(thisIMG);
                if (index >= 0 && index < $imgvalues.length - 1)
                    nextItem = $imgvalues[index + 1];

                $('#' + nextItem).trigger('click');
            }, 1000);

更新-工作代码

通过向数组添加sort找到了解决方案，然后如果使用类image-gallery-item命中项目的末尾或开头，则循环next/prev。我将发布工作代码作为答案，以防其他人发现这个问题，并希望使用gridalicious，isotope或带有列的砖石布局制作一个bootstrap模态图像库。

JavaScript

来源：https://stackoverflow.com/questions/48923063/adding-next-and-previous-buttons-to-bootstrap-targeting-link-ids

1条答案

按热度按时间

yzuktlbb1#

请记住，您将需要添加带有show-next-image和show-previous-image类的按钮到您的模态中。之后，下面的代码将允许您使用类image-gallery-item循环浏览图像。

$('#show-next-image, #show-previous-image').click(function () {
        if ($(this).attr('id') == 'show-previous-image') {
            $('#showImageModal').modal('hide');
            setTimeout(function () {
                var thisIMG = $("#imgid").html();

                var imgs = document.getElementsByClassName("image-gallery-item");
                var $imgvalues = Array.prototype.map.call(imgs, function (el) {
                    return el.id;
                });

                var lastIMG = $('.image-gallery-item').length;
                $imgvalues.sort();
                index = $imgvalues.indexOf(thisIMG);
                if (index <= lastIMG - 2) {
                    nextItem = $imgvalues[index + 1];
                } else {
                    nextItem = $imgvalues[0];
                }
                $('#' + nextItem).trigger('click');
            }, 1000);
        } else {
            $('#showImageModal').modal('hide');
            setTimeout(function () {
                var thisIMG = $("#imgid").html();

                var imgs = document.getElementsByClassName("image-gallery-item");
                var $imgvalues = Array.prototype.map.call(imgs, function (el) {
                    return el.id;
                });

                var lastIMG = $('.image-gallery-item').length;
                $imgvalues.sort();
                index = $imgvalues.indexOf(thisIMG);
                if (index >= 1) {
                    nextItem = $imgvalues[index - 1];
                } else {
                    nextItem = $imgvalues[lastIMG - 1];
                }
                $('#' + nextItem).trigger('click');
            }, 1000);
        }
    });

赞(0）回复(0）举报 2023-06-04

我来回答

javascript 向 Bootstrap 添加下一个和上一个按钮以确定链接ID

1条答案

相关问题

热门标签

最新问答