需要显示多个 json 图像数组，但只有一个

Question

所以它一定是我没有得到的迭代！我的模板文件中有一个 for 循环，它显示多个 cycle2 幻灯片：

<?php foreach ($foo as $bar) { ?>

    <div class="image">
        <a href="<?php echo $product['href']; ?>">
            <div class="cycle-slideshow"
                data-cycle-fx=scrollHorz
                data-cycle-timeout=0
                data-cycle-swipe=true
                >
                <div class="cycle-prev"></div>
                <div class="cycle-next"></div>
                <img class="productID_<?php echo $product['product_id']; ?>" src="<?php echo $product['thumb']; ?>" title="Click to see more details on <?php echo $product['name']; ?>" alt="<?php echo $product['name']; ?>" />
            </div>
        </a>
    </div>

<?php } ?>

现在我最初在 mouseenter 上进行了这项工作，因此它对 for 循环中的每个 .image 都执行了此操作。现在我摆弄它来加载所有准备好的图像。这就是我目前所拥有的，但它只为 cycle2 幻灯片的每个实例加载第一个图像数组。

$( document ).ready(function() {
    var image = $(".cycle-slideshow").find("img:first");
    var classList = image.prop('class').split(/\s+/);
    $.each( classList, function(index, item){
        if( item.indexOf('productID_') > -1 ) {
            product_id = item.replace("productID_","");

            $.ajax({
                url: 'index.php?route=product/product/images',
                type: 'post',
                data: 'product_id='+product_id + '&width='+image.width() + '&height='+image.height(),
                dataType: 'json',
                success: function(json) {
                    if (json['images']) {
                        for (var i = 0; i < json['images'].length; i++) { 
                            image.after('<img src="'+json['images'][i]+'" width="'+image.width()+'" height="'+image.height()+'" alt="'+$(image).prop("alt")+'" />');
                        }

                        image.parent().cycle();
                    }
                }
            });
        }
    });
});

我已经用这条线尝试了各种方法：

var image = $(".cycle-slideshow").find("img:first");

与使用 .children 和 img:eq(0) 一样，但上述方法在正确引入图像尺寸参数的情况下效果最佳。

但是如何迭代，让每个 cycle2 实例都列出自己的 json 数组呢？

非常感谢任何帮助。

编辑以澄清下面的答案，看看它是否有帮助：

public function images() {
    $json = array();
    if (isset($this->request->post['product_id'])) {
        $this->load->model('catalog/product');
        $product_images = $this->model_catalog_product->getProductImages($this->request->post['product_id']);
        if ($product_images) {                      
            $this->load->model('tool/image');
            foreach ($product_images as $result) {
                if(($result['image'] && file_exists(DIR_IMAGE . $result['image'])) && isset($this->request->post['width']) && isset($this->request->post['height'])){
                    $json['images'][] =  $this->model_tool_image->resize($result['image'], $this->request->post['width'], $this->request->post['height']);
                }
            }
        }
    }   
    $this->response->setOutput(json_encode($json));
}

Answer 1

我认为这是你需要的：

$(document).ready(function() {
    $(".cycle-slideshow").each(function() {
        var image = $(this).find("img:first");
        // Rest of your code
    });
});

您的代码只是将image 设置为第一张幻灯片中的第一张图片，而从不处理其他幻灯片。

其他建议：

将产品 ID 放在 data- 属性中，这样您就不必从类中提取它。

在您的 AJAX 调用中使用以下语法：

data: {
    product_id: product_id,
    width: image.width(),
    height: image.height()
}