javascript - 如何在此 jQuery .each() 循环中解析 "undefined"？

Question

我正在使用 Shopatron API，下面的大部分代码都是从他们的示例中采用的。应该注意的是，我正在使用他们的 API 库进行调用，并且它正在从那个 Angular 进行连接和工作。我正在根据需要输出所有内容，但由于在我尝试循环 .each()数组中的图像。

作为引用，这里是 console.log(data); 的屏幕截图，我正在“拉动”Shopatron 中的产品。

我在这里添加了一些红色箭头来指出我感兴趣的内容。主要是我想遍历该图像数组，以便输出其他图像。您可以在下面看到我试图在我的 .each(); 循环中获取 URL 的位置，它却给了我 undefined。

现在这里有一个 console.log(this.url); 来 self 的函数和 .each(); 循环，所以它只分离出那些图像数组。

如您所见，我正在获取 URL，这很好。但是我也得到了 undefined ，当我试图用它来附加 img 标签时，它会这样输出。

现在我将向您展示我用来执行所有这些操作的代码。您可以在第一个屏幕截图中看到许多其他功能调用产品选项和价格以及垃圾信息。所有这些都在起作用。我只有图像有问题，所以我将它隔离到那个函数。

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;
        }

这是我得到的用于踢球的输出的控制台屏幕截图。

感谢您的建议和帮助。

Answer 1

我相信这是因为 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 的数组和对象通用迭代器。