Chocolat.js Lightbox jQuery未检测元素，返回未定义的元素

Question

我正试图在一个简单的网站中实现chocolat.js。我以前遇到的问题是，缩略图只是直接处理锚链接--即在新窗口中启动图像。它应该以一个模式在屏幕上启动，并显示一些箭头和关闭按钮。因此，我进一步研究，开始实现我认为需要的额外代码，但当我在控制台中玩的时候，似乎正在发生的事情是，jQuery甚至没有拾起我正在标记它的元素。

例如，在控制台中，如果我键入var instance = $('.chocolat-parent').Chocolat({loop:true,imageSize:'cover'}).data('chocolate');，它将返回为undefined

下面是我收到的错误消息：

jquery.min.js:2 Uncaught TypeError: Cannot read property 'api' of undefined
    at HTMLDocument.<anonymous> (index.html:144)
    at l (jquery.min.js:2)
    at c (jquery.min.js:2)

我的HTML代码是：

<div class="sl-gallery-cta flex-parent row align-center justify-space-around chocolat-parent" data-chocolat-title="set title">
                <a class="chocolat-image" href="./assets/stoneland-gallery-1.jpg" title="">
                    <img class="gallery-1" width="250" src="./assets/stoneland-gallery-1.jpg" />
                </a>
                <a class="chocolat-image" href="./assets/stoneland-gallery-2.jpg" title="">
                    <img class="gallery-2" width="250" src="./assets/stoneland-gallery-2.jpg" />
                </a>
                <a class="chocolat-image" href="./assets/stoneland-gallery-3.jpg" title="">
                    <img class="gallery-3" width="250" src="./assets/stoneland-gallery-3.jpg"/>
                </a>
                <a class="chocolat-image no-thumb" href="./assets/stoneland-gallery-4.jpg" title="">
                </a>
                <a class="chocolat-image no-thumb" href="./assets/stoneland-gallery-5.jpg" title="">
                </a>
                <div class="chocolat-wrapper">
                    <a class="api-next" href="#">Next</a>
                    <a class="api-prev" href="#">Prev</a>
                    <a class="api-close" href="#">Close</a>
                    <div id="container3" style="width: 80%; max-width:1000px; height: 600px; background: #E0E0E0; margin:auto;"></div>
                </div>
            </div>

我的javascript如下所示：

<script>
$(document).ready(function(){
    var instance = $('.chocolat-parent').Chocolat({
        loop: true,
        fullscreen: true,
        imageSize: 'cover'
    }).data('chocolate');
    instance.api().open();
    window.setInterval(function(){
        instance.api().next();
    },2000);
    $('.api-close').on('click', function(e) {
        e.preventDefault()
        console.log('close start');
        var def = instance.api().close()
        def.done(function(){
            console.log('close done');
        })
    })
    $('.api-prev').on('click', function(e) {
        e.preventDefault()
        console.log('prev start');
        var def = instance.api().prev()
        def.done(function(){
            console.log('prev done');
        })
    })
    $('.api-next').on('click', function(e) {
        e.preventDefault()
        console.log('next start');
        var def = instance.api().next()
        def.done(function(){
            console.log('next done');
        })
    })
});
</script>

Answer 1

var instance = $('.chocolat-parent').Chocolat({
    loop: true,
    fullscreen: true,
    imageSize: 'cover'
}).data('chocolate');

似乎您有一个错误，在最后一行中应该是chocolat而不是chocolate。

}).data('chocolat');