Javascript 在单击下一步时切换图像src&；使用JQuery的prev

我尝试在单击时切换图像

src

，而不是鼠标移出和插入。

---

我有多个图像，我想切换单个产品的图像，如果存在于图像的同一父分区中的按钮，将单击。 有什么想法吗

功能切换图像（thisimage）{
thisimage.toggle（）；
}

.prev\u btn{
位置：绝对位置；
左：7px；
顶部：30px；
底部：0；
宽度：30px；
身高：128%；
z指数：2；
边框样式：虚线；
}
.下一个{
位置：绝对位置；
右：65%；
顶部：30px；
底部：0；
宽度：30px；
身高：128%；
z指数：2；
边框样式：虚线；
}

---

使用jQuery，您可以这样做

请为图像元素指定一个类。否则，也可以切换所有图像标记

$（'.prev_btn，.next_btn'）。在（'click'，函数（e）上{
$（'.img'）.toggle（）；
});
$（'.prev_btn，.next_btn'）。在（'click'，函数（e）上{
var this$=$（e.currentTarget），//获取当前单击的按钮元素
parent$=此$.parents（'#pro'）.first（），//获取id为#pro的按钮的父级
contextBasedImgs$=parent$.find（'img'）；//获取父div中id为#pro的所有图像
contextBasedImgs$.each（函数（忽略，el）{
var currEl$=$（el），
newURI=currEl$.attr（'onmouseout'）；
currEl$.attr（'src'，newURI）；
});
});首先，将图像移动到图像本身的
数据-
属性上的数组中，这会为您提供不同的图像集和任意数量的图像，而不仅仅是在两个图像之间切换，您不需要“下一个”和“上一个”按钮，因此这意味着您需要两个以上的图像

<img data-images='["https://www.w3schools.com/html/img_chania.jpg","https://www.w3schools.com/html/pic_trulli.jpg"]' ...

在这个处理程序中，我们使用父包装器找到相关的图像。在这里，我为包装器提供了一个
类而不是
id
，这样您就可以拥有多个包装器，而不需要不同的id，并且更容易在css中设置样式（而不是
.closest（“div”）
）

单击事件处理程序调用具有方向的公共方法（而不是重复所有相同的代码）

这将在每个图像上存储当前索引，因此无需“记住”其他变量

然后从图像中读取数组，根据方向更改索引，并更新图像

我不得不对你的CSS中的按钮做一些调整（只是为了演示），第二张图片包含了一个第三张图片的url，显示它不仅仅是切换


$（“.prev_btn”）。单击（函数（）{
changeImage（$（this）.closest（.wrapper”）.find（“img”）.first（），-1）
});
$（“.next_btn”）。单击（函数（）{
changeImage（$（this）.closest（.wrapper”）.find（“img”）.first（），1）
});
功能更改图像（img，方向）
{
var图像=图像数据（“图像”）；
var idx=模拟数据（“指数”）；
idx+=方向；
如果（idx>=images.length）idx=0；
如果（idx<0）idx=images.length-1；
img
.数据（“索引”，idx）
.attr（“src”，images[idx]）；
}
.wrapper{
位置：相对位置；
}
.prev\u btn、.next\u btn{
位置：绝对位置；
左：0；
顶部：0px；
底部：0；
宽度：30px；
高度：255px；
z指数：2；
边框样式：虚线；
}
.下一个{
左：170px；
}

每个图像上都有多个图像和按钮，您确定上面的代码只会更改单击哪个按钮的图像吗？不，那么您当然必须针对特定元素。这就是我说的，你必须注意哪些元素需要切换。如果您显示HTML并解释哪些元素，我可以进一步帮助您。@dev“有多个”-您的问题没有说明甚至暗示这一点。像“图像”这样的术语使它看起来好像只有一个图像。请更新您的问题以澄清-例如，您是否有多个图像，但每个图像只有一组下一个/上一个或下一个/上一个（多个下一个/上一个）？我想切换单个产品的图像，如果存在于图像的同一父分区中的按钮将单击。@dev请编辑问题以包括此，可能需要额外的HTML来演示。你能提供完整的HTML吗？我已经更新了这个问题。谢谢你的回答，但是你在contextBasedImgs$.attr（'src'，'）中使用了图像的静态url；编辑了我的答案。只需看看上面的我的新答案@dev。一些js错误是他们的，你能看一下吗？它看起来很棒，没有“数据”属性是无法完成的，因为我不可能更改html。你在别处说过你希望每个img有不同的图像（代码中不是静态的）-您是如何指定这些图像的？您是否还说您不能删除
onmouseover=“this.src=”
？好吧，我很困惑，因为
onmouseover=
是html就像
data images=
是html一样。但不管怎样-您是如何为每个图像指定src=列表的？
$(".prev_btn").click(function() {

$(this).closest(".wrapper").find("img").first()

img.data("index", new_index);