问题描述
现在我正在开发一个用 Jquery(JS) 编写的 Web 应用程序的前端。我的目标是使用 Owl Carousel 从 JSON 加载动态数据。
我已经可以从 JSON 加载所有项目并在“for”循环中动态创建轮播。一切都按预期工作,虽然我的问题是每次切换滑块时都在 url 上获取“数据哈希”属性,但我知道 Owl Carousel 在插件中内置了此功能,但实际上不适用于我的代码.有什么想法吗?
这是我的代码
for (var key in data_allapprovedjson) {
if (data_allapprovedjson.hasOwnProperty(key)) {
for (var key2 in data_allapprovedjson[key]) {
console.log(data_allapprovedjson[key]);
var itemid = data_allapprovedjson[key][key2].itemid;
var itemname = data_allapprovedjson[key][key2].itemname;
var itemdescription = data_allapprovedjson[key][key2].description;
var itemsellerid = data_allapprovedjson[key][key2].sellerid;
var itemsellername = data_allapprovedjson[key][key2].sellername;
var itemprice = data_allapprovedjson[key][key2].price;
var itemgender = data_allapprovedjson[key][key2].gender;
var itemfashion = data_allapprovedjson[key][key2].fashion;
var itemposeanimations = data_allapprovedjson[key][key2].poseanimations;
var itemhomegarden = data_allapprovedjson[key][key2].homegarden;
var itembodyshop = data_allapprovedjson[key][key2].bodyshop;
var itemmiscellaneous = data_allapprovedjson[key][key2].miscellaneous;
var itemmodify = data_allapprovedjson[key][key2].modify;
var itemcopy = data_allapprovedjson[key][key2].copy;
var itemtransfer = data_allapprovedjson[key][key2].transfer;
var itemexpire = data_allapprovedjson[key][key2].expiresin;
var itemimage1 = data_allapprovedjson[key][key2].image1;
var itemimage2 = data_allapprovedjson[key][key2].image2;
var itemimage3 = data_allapprovedjson[key][key2].image3;
var itemvideo = data_allapprovedjson[key][key2].video;
//Variaveis Nome de elementos Estáticos no Layout
var descricao = "Product Description";
var variation = "Variation of this product";
var permissao = "Permissions of this product";
var linen = "$L ";
var expiracao = "Expires in ";
var sold = "Sold by: ";
var vendorStore = "vendor Store";
var categories = "Categories";
function init_carousel() {
var owl = $('.owl-carousel');
owl.owlCarousel({
items: 1,loop: false,center: true,nav: true,URLhashListener: true,autoplayHoverPause: true,startPosition: 'URLHash'
});
owl.owlCarousel();
// Go to the next item
$('#next').click(function() {
owl.trigger('next.owl.carousel');
})
// Go to the prevIoUs item
$('#prev').click(function() {
// With optional speed parameter
// Parameters has to be in square bracket '[]'
owl.trigger('prev.owl.carousel',[300]);
})
}
$('.owl-stage').append('<div id="" class="container-fluid min-vh-100 pb-5 padding-top-2 owl-item" data-hash="' + itemid + '"><div class="row"><div class="col-6 d-flex"><div id="carousel-thumb" class="carousel slide carousel-fade carousel-thumbnails" data-ride="carousel"><div class="carousel-inner" role="listBox"><div class="carousel-item active"><img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(88).jpg" alt="First slide"></div><div class="carousel-item"><a id="lightBox" href="https://mdbootstrap.com/img/Photos/Slides/img%20(121).jpg"><img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(121).jpg" alt="Second slide"><i class="fas fa-search-plus zoom-icon"></i></a></div><div class="carousel-item"><a id="lightBox" href="https://mdbootstrap.com/img/Photos/Slides/img%20(31).jpg"><img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(31).jpg" alt="Third slide"><i class="fas fa-search-plus zoom-icon"></i></a></div><div class="carousel-item"><a id="lightBox" href="https://mdbootstrap.com/img/Photos/Slides/img%20(31).jpg"><img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(31).jpg" alt="Third slide"><i class="fas fa-search-plus zoom-icon"></i></a></div></div><a class="carousel-control-prev" href="#carousel-thumb" role="button" data-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="sr-only">PrevIoUs</span></a><a class="carousel-control-next" href="#carousel-thumb" role="button" data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="sr-only">Next</span></a><h4 class="pt-3 title-variations">Product Images</h4><ol class="carousel-indicators"><li data-target="#carousel-thumb" data-slide-to="0" class="active"> <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Others/Carousel-thumbs/img%20(88).jpg" class="img-fluid"></li><li data-target="#carousel-thumb" data-slide-to="1"><img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Others/Carousel-thumbs/img%20(121).jpg" class="img-fluid"></li><li data-target="#carousel-thumb" data-slide-to="2"><img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Others/Carousel-thumbs/img%20(31).jpg" class="img-fluid"></li><li data-target="#carousel-thumb" data-slide-to="3"><img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Others/Carousel-thumbs/img%20(31).jpg" class="img-fluid"></li></ol></div></div><div class="col-6"><h1 class="product-title">' + itemname + '</h1><h1 class="product-price">' + linen + itemprice + ' <i class="far fa-calendar-alt"></i>' + expiracao + itemexpire + '</h1><ul class="vendor"><li><img src="https://mdbootstrap.com/img/Photos/Slides/img%20(121).jpg" style="object-fit:cover;border-radius: 100%;margin-top: 15px; margin-right: 10px;" height="40" width="40">vendorStore</li><li class="sold-by">' + sold + itemsellername + '</li></ul><div class="padding-top-30"></div><div class="padding-Box"><h3 class="product-description-title pt-3">' + descricao + '</h3><p class="product-description-text">' + itemdescription + '</p><div class="padding-Box"><form><div class="form-group"><label class="select-text" for="exampleFormControlSelect1">' + variation + '</label><select class="form-control" id="exampleFormControlSelect1"><option></option><option></option><option></option><option></option><option></option></select></div></form></div><!--/Select Variation--><!--Product Category--><div class="padding-Box"><h3 class="product-description-title">' + categories + '</h3><ul class="categories-list"><li>' + itemfashion + '</li><li>' + itemposeanimations + '</li><li>' + itemhomegarden + '</li><li>' + itemmiscellaneous + '</li><li>' + itembodyshop + '</li></ul></div><div class="padding-Box"><h3 class="product-description-title">' + permissao + '</h3><ul class="permissions-list"><li><i class="fas fa-edit"></i>' + itemmodify + '</li><li><i class="fas fa-exchange-alt"></i>' + itemtransfer + '</li><li><i class="far fa-copy"></i> ' + itemcopy + '</li></ul></div></div></div></div></div> ');
}
}
}
jQuery(document).ready(function() {
init_carousel();
});
填充“Data Hash”属性的变量是“itemid”,但 url 上什么也没发生,当我检查整个 Owl Carousel 时,会打印该循环变量的值在“数据哈希”上按原样设置,但在我通过 BTN 拖动或更改滑块时不将其发送到 url,如本例所示:https://owlcarousel2.github.io/OwlCarousel2/demos/urlhashnav.html
我已经尝试了以下方法:
owl.on('changed.owl.carousel',function() {
window.location.hash = itemid;
});
注意:我不是 JS 专家,但我了解语言和逻辑,但我已经在这附近呆了几天,欢迎任何帮助。谢谢!
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)