我正在使用Shopatron API,并且从他们的示例中采用了以下大部分代码。应该注意的是,我正在使用他们的API库来进行调用,并且它正在从这个角度进行连接和工作。我正在输出所有内容,因为我需要它,但由于在我尝试循环遍历数组中图像的.each()
时发生“未定义”错误而无法输出的其他产品图像。 / p>
作为参考,这里是console.log(data);
我在“Shopatron”中“拉动”产品的屏幕截图。
我添加了一些红色箭头来指出我在这里感兴趣的东西。主要是我想循环遍历该图像数组,以便我可以输出其他图像。您可以在下面看到我在.each();
循环中尝试获取网址的位置,而不是给我undefined
。
现在这里是我的函数和console.log(this.url);
循环中的.each();
,所以它只是隔离到那个图像数组。
正如您所看到的,我正在获取URL,这很好。但是当我试图用它来附加一个img标签时,我也会得undefined
然后输出。
现在我将向您展示我用来完成所有这些操作的代码。还有很多其他功能可以调用产品选项以及第一次屏幕截图中可以看到的价格和垃圾。所有这些都有效。我只是对图像有困难所以我把它分离到那个功能。
var partNumber = '<?php echo $productID; ?>';
$(document).ready(function() {
Shopatron.getProduct({
partNumber: partNumber
},{
success: function(p) {
outputProductName(p);
outputProductImage(p); // Here's the function up here
outputProductPrice(p);
outputDescription(p);
outputSpecs(p);
},
templateFriendly : false
}
);
function outputProductImage(data) {
var target = '#shopatron_product_image';
var clickFunction =
$('#shopatron_product_image').html('<img src="' + data.image + '">');
// Here's my loop that is giving me undefined...
$(data.images).each(function() {
$('#shopatron_additional_images').append("<li><a href='" + this.url + "' onclick=\"swapImage('#shopatron_product_image', '" + this.url + "'); return false;\"><img src='" + this.url + "'></a></li>");
});
return;
}
这是一个控制台屏幕截图,显示了我为踢球输出所获得的内容。
感谢您的建议和帮助。
答案 0 :(得分:3)
我相信这是因为data.images不是一个dom元素,你试图从它创建一个jQuery对象。
而不是:
$(data.images).each(function() {
$('#shopatron_additional_images').append("<li><a href='" + this.url + "' onclick=\"swapImage('#shopatron_product_image', '" + this.url + "'); return false;\"><img src='" + this.url + "'></a></li>");
});
尝试:
$.each(data.images, function(i, image){
$('#shopatron_additional_images').append("<li><a href='" + image.url + "' onclick=\"swapImage('#shopatron_product_image', '" + image.url + "'); return false;\"><img src='" + image.url + "'></a></li>");
})
这是jQuery的数组和对象的通用迭代器。
答案 1 :(得分:0)
我真的要感谢所有努力帮助我解决这个问题的人。事实证明,这是Shopatron的一个错误。它当然不会产生可见错误,似乎更像是他们的数据库没有更新。他们的建议是使用标准管理仪表板简单地将图片重新添加到产品项目中,没什么特别的。它解决了这个问题。不完全是一个先进的解决方案,但也许如果其他人碰到这个,它会有所帮助。