图库/单击图像，将其替换为新图像答案

【问题标题】：gallery / click image, replace it with new image图库/单击图像，将其替换为新图像
【发布时间】：2014-06-09 23:28:14
【问题描述】：

我做了几个小时的研究，但我找不到任何与我正在寻找的东西足够接近的东西。如果您知道类似的主题，请发布链接。

我在 js 方面没有太多经验。我想创建一个简单的小画廊。我在网站上有一张图片。单击时，应将图像替换为另一张图像（image2）。当我现在点击这个时，它应该被替换为 image3 等等。我试过跟随，但这根本不起作用。

$('.image1').click(function() {
    $(this).attr('src', 'image2.jpg');
    $(this).addClass('image2');
});

$('.image2').click(function() {
    $(this).attr('src', 'image3.jpg');
    $(this).addClass('image3');
});

… 当我得到最后一张图片（例如“image10”）时，画廊应该开始（image1）。

感谢您的帮助

【问题讨论】：

请向我们展示最终的 html
最好让你的函数更通用，这样当点击任何图像时，它会运行相同的功能并通过增加数字从当前图像名称中获取下一个图像名称，例如例子。
@Bartdude 问题是事件委托
使用纯 CSS 的图片库！ script-tutorials.com/pure-css3-galleries-collection
@Alex > 确实如此，因为元素一开始没有image2 类，所以没有设置事件，所以基本上它只能与第一张图像一起使用。我已经编辑了我的评论...

标签： javascript jquery image replace click

【解决方案1】：

这样写。您不需要 10 个不同的事件处理程序。

创建一个通用类..例如imageClass

$(document).on('click', '.imageClass', function () {
    var src = $(this).attr('src'); //image1.png
    var index = src.split('.')[0].replace('image',''); //get index `1`
    //add 1 to index or reset to first image
    index = (index == "10") ? 1 : parseInt(index) + 1;
    $(this).attr('src', 'image' + index + '.jpg');
});

【讨论】：

这是获取索引的一种非常糟糕的方法
@Alex - 好吧..你可以使用正则表达式，但我不擅长它:)
index() 甚至没有意义。使用正则表达式或 lastindexof() 结合子字符串...
.slice(-1) 永远不会等于 10！
为什么没有意义？您放入所有图像，仅显示第一个图像，然后使用长度和索引使滑块动态和工作

【解决方案2】：

在这里使用 index() 确实有意义：

Fiddle

JS 代码

$('.image').first().show();
$('.image').on('click', function () {
  target = $('.image:visible').index();
  lastElem = $('.image').length -1; //2 cause 3 images..
  target === lastElem ? target = 0 : target = target + 1;
  $('.image').hide()
  $('.image').eq(target).show();
});

除了第一张图片之外的所有图片最初都是隐藏的。

【讨论】：

您假设对于每个 src 都会存在一个图像，因为它没有 index() 没有意义。
操作代码不起作用。这是使其工作的一种方法。如果他想坚持当前的标记，他当然可以使用正则表达式。但他也可以选择这种方式来解决他的问题:)
但标记不可用。如果只有一个元素，则不能使用 index() 函数，因此必须使用字符串方法。没有图像，只有 src 更改的图像。那么索引怎么可能呢？
你不必一遍又一遍地解释字符串方法的使用。问题是他如何使滑块工作。不是他如何在不更改标记的情况下使滑块工作。你想告诉我解决方案应该只是 JS 解决方案吗？将图像添加到标记中没有问题。这是解决他的问题的可靠方法。当然 index() 方法不是只有 1 张图片的选项，但没有人说不允许将它们全部添加到 html 中。
但是 OP 说他的标记中只有一张图片。当您仅使用索引提供 JS 代码时，您至少应该提供添加 html 的建议，否则您的答案根本不适用。期间。

【解决方案3】：

你正在寻找一种叫做 Carousel 的东西，你在 github 上有很多它们的开源实现。最常用的之一是 Lightbox：https://github.com/lokesh/lightbox2/blob/master/js/lightbox.js

代码不是很长，您应该“轻松”（在引号之间：p）找到您页面所需的部分代码。

【讨论】：