当图片网址在点击时更改时，猫头鹰轮播不会更新

Question

>我有一个产品页面，其中包含图像和产品描述，所有这些都是从json文件动态加载的。一切都很完美，除了猫头鹰旋转木马，当我点击上一个/下一个箭头时。主图片和数据会按预期更新，但轮播不会更新。

我记录了新的图像网址，它们正在正确更新。

我尝试在代码中的任何地方使用它

$("#owl-focus").trigger('refresh.owl.carousel');

这是页面的javascript

。

// ========== Compile Product Data =======================================
$.getJSON("../../json/guitars.json", function(data) {
var jsonLength = data.length
// -------  Parse & Returns URL Parameters -----------------------------
function getUrlVars(guitar) {
var vars = {}
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
})
return vars
}
// ------------ Append Clicked Image -------------------------------------
var guitar = parseInt(getUrlVars()["product"], 10)
loadGuitar(guitar)
function loadGuitar(guitar) {
// Images
var image1 = data[guitar].img1
var image2 = data[guitar].img2
var image3 = data[guitar].img3
var image4 = data[guitar].img4
var alt = data[guitar].alt
// description
var title = data[guitar].title
var brand = data[guitar].brand
var code = data[guitar].code
var price = data[guitar].price
var description = data[guitar].description
var specs = data[guitar].specs
$('#clickImg').attr({src: `../${image1}`, alt: `${alt}`})
$('#img1').attr({src: `../${image1}`, alt: `${alt}`})
$('#img2').attr({src: `../${image2}`, alt: `${alt}`})
$('#img3').attr({src: `../${image3}`, alt: `${alt}`})
$('#img4').attr({src: `../${image4}`, alt: `${alt}`})
$('#title').html(title)
$('#brand').html(brand)
$('#variant-sku').html(code)
$('#price').html(price)
$('#description').html(description)
$('#specs').empty();
specs.forEach(spec => {
$("#specs"). append(`<li>${spec}</li>`)
})
}
// -------------- Owl Carousel -------------------------------------------
$(document).ready(function () {
$('#owl-focus').owlCarousel({
loop: true,
margin: 10,
nav: true,
navText: [$('.owl-navigation .owl-nav-prev'), $('.owl-navigation .owl-nav-next')],
responsiveClass: true,
responsive: {
0: {
items: 3,
},
1050: {
items: 4,
}
}
})
})
// -------- Next / Previous Arrows -------------------------------------
$("#prev-btn").click(function() {
if (guitar === 0) {
guitar = jsonLength - 1
} else {
guitar = guitar - 1
}
loadGuitar(guitar)
onPageChg()
})
$("#next-btn").click(function() {
if (guitar === jsonLength - 1) {
guitar = 0
} else {
guitar = guitar + 1
}
loadGuitar(guitar)
onPageChg()
})
})
// ========== Compile Product Data End ===================================

Answer 1

想通了。我没有尝试重新加载猫头鹰，而是重新加载了页面，因为我应该有新数据。类似的功能首先将我带到该产品页面，并进行了一些调整。

$("#prev-btn").on("click", function(e) {
$.getJSON("../../json/guitars.json", function(json) {
if (guitar === 0) {
new_id = jsonLength - 1
} else {
new_id = guitar - 1
}
window.location.href = "product.html?product=" + new_id
})
})
$("#next-btn").on("click", function(e) {
$.getJSON("../../json/guitars.json", function(json) {
if (guitar === jsonLength - 1) {
new_id = 0
} else {
new_id = guitar + 1
}
window.location.href = "product.html?product=" + new_id
})
})

在我只是更改照片，描述等的属性之前