javascript - 使用脚本对所有图像产生影响

Question

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

在此处输入图像描述

但脚本效果仅对第一个出现的图像产生影响，并非全部。哪里有问题？

score 1 · Accepted Answer

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

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

});

score 0 · Accepted Answer

每个元素的 ID 必须是唯一的，请改用类或带有上下文的标记名称：

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

score 0 · Accepted Answer

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

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

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

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

score 0 · Accepted Answer

问题是您使用 id 作为选择器（$('#kio')，# 表示它是一个 id）并且 id 对页面来说是唯一的，因此只会返回一个。因此，您应该将 id 属性留在 img 标记之外。

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

附带说明：adipoli-wrapper>img您的代码中的类名不是有效的类名，您可能的意思只是adipoli-wrapper，我在回答中假设的。

4 回答 4