Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/image/5.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Jquery 图像蒙太奇-重复_Jquery_Image_Montage - Fatal编程技术网

Jquery 图像蒙太奇-重复

Jquery 图像蒙太奇-重复,jquery,image,montage,Jquery,Image,Montage,对不起,我的英语不好) 通常使用插件jquery-。面临一个问题: 我在同一个页面上有几个#am容器,使用插件只在一个容器中正确显示,但在另一个容器中不起作用。问题。如何将函数分配给所有#s容器,而不仅仅是一个 代码: var$container=$('am container'), $imgs=$container.find('img').hide(), totalImgs=$imgs.length, cnt=0; $imgs.每个(功能(i){ var$img=$(本); $('您不能有重复

对不起,我的英语不好)

通常使用插件jquery-。面临一个问题:

我在同一个页面上有几个#am容器,使用插件只在一个容器中正确显示,但在另一个容器中不起作用。问题。如何将函数分配给所有#s容器,而不仅仅是一个

代码:

var$container=$('am container'),
$imgs=$container.find('img').hide(),
totalImgs=$imgs.length,
cnt=0;
$imgs.每个(功能(i){
var$img=$(本);

$('您不能有重复的id。所有id都必须是唯一的。
因为您有重复的id,JavaScript/jQuery只使用id为
#am container
的第一个元素

因此,您需要更改元素以获得类名。

然后,选择器将是
var$container=$('.am container')
而不是
var$container=$('.\am container')

概念很简单!)非常感谢!不客气。如果这个答案对您有帮助,您介意接受吗?谢谢。哦……对不起)忘记:)尝试使用CSS类选择器而不是ID。ID在1页内应该是唯一的,这可能是问题所在。
var $container  = $('#am-container'),
            $imgs       = $container.find('img').hide(),
            totalImgs   = $imgs.length,
            cnt         = 0;

        $imgs.each(function(i) {
            var $img    = $(this);
            $('<img/>').load(function() {
                ++cnt;
                if( cnt === totalImgs ) {
                    $imgs.show();
                    $container.montage({
                        fixedHeight : 90,
                        margin : 1,
                        fillLastRow : true
                    });
                    $container.montage++;
                }
            }).attr('src',$img.attr('src'));
        });