在div中选择多个图像

Question

我正在尝试在我的应用程序中创建一个图库页面。我有一个要求，我需要通过选择页面上的一些图像来创建新专辑。我将它们显示在div中，如下所示。页面中的每个图像都被赋予了唯一的ID。

我想允许用户选择该div中的一些图像来创建新专辑。选定的图像应以特殊样式表示，类似于下图。如何检测用户何时选择了图像，并相应地显示所选图像？

Answer 1

jsFiddle Demo

鉴于<div>中的一组图片，您的图片建议您在某个用户事件（可能是点击）之后添加一些特殊样式，以表示用户选择。您可以通过将点击处理程序绑定到每个图像，并在选择它们时应用某种CSS样式，使用jQuery和CSS来完成此任务。

然后，当用户点击“创建相册”时，您可以找到当前所选的所有图片，并仅显示展示相册的图片。

显然，“创建相册”＆＃39;您的案例中的操作可能涉及某种POST操作，该操作会将所选图像列表提交给您的服务器。但是，对于客户端示例，请参阅上面的jsFiddle演示。 JavaScript / CSS的相关部分如下所示。由于我不知道您的DOM是什么样的，因此您可能需要调整其中一些CSS / jQuery选择器以匹配您的页面。

使用CSS对所选图像进行不同的样式：

img {
    width: 150px;
    border: 1px solid black;
}
img.selected {
    border: 3px solid green;
}

使用jQuery切换selected类（假设图像位于<div>，ID为＃34;图库＆＃34;）：

$("#gallery > img").click(function () {
    $(this).toggleClass("selected");
});

使用jQuery获取所选图像的列表：

$("img.selected");