Question

目前我有缩略图，当我点击它们时，图片的大版本会直接显示在缩略图右侧的div中。我现在想要做的是点击div中较大的图片，然后触发一个显示更大版本图片的灯箱。

我不太确定如何做我正在考虑的解决方案，所以我会尝试解释。我想当我点击div触发灯箱时我想点击图片的src，然后以某种方式将其重定向到我图片文件夹中的另一个src。

示例：

当我点击div中的图像时，我得到了pic的src，可以说源是：

SRC = “redpic.jpg”

然后让我们在我的图片文件夹中说我有一个更大版本的图片选择与源：

SRC = “redpic_large.jpg”

是否可以通过在末尾添加_large来操纵第一个图像的src src =“redpic.jpg”然后将其附加到我的收藏夹???

每当我尝试用我的图像做事时，我似乎总是遇到问题。

当我在控制台中检查src变成类似//139.0.0.1:56328/img/dotted.jpg之类的东西时，请说src =“redpic.jpg”这似乎会给我带来很多问题

Answer 1

当然，你可以得到这样的图像来源：

$("img").on("click", function(){
   var source = $(this).attr("src");
});

这将为您提供完整的路径（redpic.jpg）。

您可以使用split()获取两个部分的数组（名称和扩展名）

var parts = source.split(".");

现在，您所要做的就是附加＆＃34; _large＆＃34;到源的第一部分，将它们组合在一起，并将您的其他图像源设置为新组合的源。

parts[0] += "_large";
var newSource = parts.join(".");

您将句点.传递给join函数，以便在元素之间加上句号，而不是默认逗号,。

剩下要做的就是使用newSource作为其他图片的来源属性。

$(".other-image").attr("src", newSource);