javascript - 猫头鹰轮播上的数据哈希属性不适用于动态生成的轮播
问题描述
现在我正在开发一个用 Jquery(JS) 编写的 Web 应用程序的前端。我的目标是使用 Owl Carousel 从 JSON 加载动态数据。
我已经可以从 JSON 加载所有项目并在“for”循环上动态创建轮播。一切都按预期工作，虽然我的问题是每次切换滑块时都在 url 上获取 de“data-hash”属性，但我知道 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();
});
填充“数据散列”属性的变量是“itemid”，但 url 上没有发生任何事情，当我检查整个 Owl Carousel 时，该循环变量的值应打印在“数据散列”上当我通过 BTN 拖动或更改滑块时，但不会将其发送到 url，如下例所示：https ://owlcarousel2.github.io/OwlCarousel2/demos/urlhashnav.html
我已经尝试了以下方法：
owl.on('changed.owl.carousel', function() {
window.location.hash = itemid;
});
- 这有效，但它只返回每张幻灯片上变量 itemid 的最后一个值。
注意：我不是 JS 方面的专家，但我了解语言和逻辑，但我在这方面已经有好几天了，欢迎任何帮助。谢谢！
解决方案
推荐阅读
- windows - 为什么 signtool.exe 以管理员身份运行时只能找到证书？
- mysql - 全新安装后无法设置mysql root密码
- android - 辅助功能服务：获取可以即时交互的视图（与语音访问相同）？
- angular - 如何使 Angular 8 与 IE11 兼容？
- vb.net - 安装时的奇怪问题
- ubuntu - Bosh lite 中的“无法连接到总线：没有这样的文件或目录”
- jquery - 如何使用 jQuery 选择插入到文本字段中的文本？
- c# - 如何让我的弹出窗口在 ASP.NET MVC 中的 AJAX 调用中关闭提交按钮？
- c# - 从 CSV 读取并将对象转换为 JSON
- sql - 从表中选择 * 但将条件添加到一列？