从不同的div点击创建colorbox图库弹出窗口？

Question

这是我一直在调整的JS代码，试图在点击$（'＃sv'）元素时弹出colorbox图库：

$('#sv').click(function(event) {
    event.preventDefault();

    $('.svItem').colorbox({
        width: '80%',
        rel: 'gallery',
        href: function () {
            return $(this).data('href');
        },
        title: function () {
            return $(this).text();
        }
    });
});

以下是我需要查询生成的HTML的内容：

<div class="col-md-4" id="sv">
    <div class="homeButton" style="background-image: url('/images/menu/btn_sv.png');">
        <div id="svItem0" class="svItem" rel="gallery" data-href="/images/sv/1.jpg" style="display:none"></div>
        <div id="svItem1" class="svItem" rel="gallery" data-href="/images/sv/2.jpg" style="display:none"></div>
        <div id="svItem2" class="svItem" rel="gallery" data-href="/images/sv/3.jpg" style="display:none"></div>
        <div id="svItem3" class="svItem" rel="gallery" data-href="/images/sv/4.jpg" style="display:none"></div>
        <h2 class="homeTitle shadow">
            Le saviez-vous?
        </h2>
    </div>
</div>

Answer 1

通过添加“ open：true ”来实现：

$('#sv').on('click', function(event) {
    event.preventDefault();

    $('.svItem').colorbox({
        width: '80%',
        open: true,
        rel: 'gallery',
        href: function () {
            return $(this).data('href');
        }
    });
});