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()
}

需要显示多个json图像阵列，但只有一个

1 个答案: