Chocolat.js Lightbox jQuery not detecting element, returning

Question

我正在尝试在一个简单的网站中实现巧克力.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');