用扩展弹出回调函数定义带有数据属性的owl旋转木马
用扩展弹出回调函数定义带有数据属性的owl旋转木马
提问于 2019-11-16 11:56:21
我已经实现了猫头鹰旋转木马在万能弹出。而且，正常工作也很好。如果，我使用了简单函数$('.owl-carousel').owlCarousel({autoplay:true, items:1})
但是，当我用数据属性定义猫头鹰旋转木马时，猫头鹰旋转木马无法工作。
HTML：
<a class="ajax-popup btn btn-dark" href="ajaxproject.html">Click To Open Popup</a>ajaxproject.html文件：
<div class="container ajax-container">
<h2 class="text-7 text-center mb-4">Title 1</h2>
<div class="row">
<div class="col-sm-7">
<div class="owl-carousel owl-theme" data-autoplay="true" data-items="1">
<div class="item"> <img class="img-fluid" alt="" src="images/bg/image-6.jpg"> </div>
<div class="item"> <img class="img-fluid" alt="" src="images/bg/image-5.jpg"> </div>
</div>
</div>
<div class="col-sm-5">
<h4 class="text-4 font-weight-600">Description:</h4>
<p>Lisque persius interesset his et, in quot quidam persequeris vim, ad mea essent possim iriure. Lisque persius interesset his et, in quot quidam persequeris vim, ad mea essent possim iriure.</p>
</div>
</div>
</div>使用数据属性：定义owl旋转木马，但是，这是行不通的。这里怎么了？
$(".ajax-popup").magnificPopup({
type: "ajax",
mainClass: "mfp-fade",
closeBtnInside: true,
gallery: {
enabled: true,
},
callbacks: {
ajaxContentAdded: function() {
$(".owl-carousel").each(function (index) {
var items = $(this).data('slides');
var autoplay = $(this).data('autoplay');
$(this).owlCarousel({
items: items,
autoplay: autoplay
});
});
}
}
});--它工作得很好。如果我使用owl旋转木马而没有数据属性：
$(".ajax-popup").magnificPopup({
type: "ajax",
mainClass: "mfp-fade",
closeBtnInside: true,
gallery: {
enabled: true,
},
callbacks: {
ajaxContentAdded: function() {
$('.owl-carousel').owlCarousel({
autoplay:true,
items:1
})
}
}
});回答 1
Stack Overflow用户
回答已采纳
发布于 2019-11-17 07:56:05
要访问数据-*属性，需要使用.attr()而不是.data()。您的代码应该是：
$(".ajax-popup").magnificPopup({
type: "ajax",
mainClass: "mfp-fade",
closeBtnInside: true,
gallery: {
enabled: true,
},
callbacks: {
ajaxContentAdded: function() {
$(".owl-carousel").each(function (index) {
var items = $(this).attr('data-items');
var autoplay = $(this).attr('data-autoplay');
$(this).owlCarousel({
items: items,
autoplay: autoplay
});
});
}
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58890465
复制相关文章
相似问题
腾讯云开发者
