使用脚本影响所有图像

Question

我有一个视图，从数据库中检索一些图像并显示它们。现在我想为它们添加一些效果。我使用了一个jquery插件。请看我的代码：

但是脚本效果只是对第一次出现的图像不是全部。问题在哪里？

Answer 1

使用JQuery选择器获取页面中的所有图像：

$('img').adipoli({
        'startEffect': 'overlay',
        'hoverEffect': 'sliceDown'

}）;

Answer 2

每个元素的ID必须是唯一的，使用类代替或使用上下文标记名称：

$('.myImgClass').adipoli({
            'startEffect': 'overlay',
            'hoverEffect': 'sliceDown'
        }); 

Answer 3

ID首先必须是唯一的，这就是为什么它只对具有该ID的第一个元素生效，而不是尝试这个

$('.adipoli-wrapper img').adipoli({
            'startEffect': 'overlay',
            'hoverEffect': 'sliceDown'
}); 

它将对包含adipoli-wrapper类的span中的所有图像标记生效，或者为您的图像标记提供一个唯一的类并使用此

 $('.YourClassName').adipoli({
                'startEffect': 'overlay',
                'hoverEffect': 'sliceDown'
 }); 

Answer 4

问题是你使用id作为选择器（$('#kio')，＃表示它是id）并且id是页面唯一的，因此只返回一个。所以你应该把id属性留在img标签之外。

解决方案是使用一个选择器，为您提供所需的所有元素，在这种情况下可能$('.adipoli-wrapper img')第一部分选择所有具有类adipoli-wrapper的元素，然后img部分将选择所有{ {1}}在这些元素中找到的元素。

旁注：你的代码中的类名img不是有效的类名，你可能只是adipoli-wrapper>img，这就是我在答案中所假设的。