我应该如何使用 .slice() 在按钮按下时交换图像的 src？（用于相册中的下一个/上一个按钮）

Question

我被难住了，真的需要一些帮助来解决这个相册问题。我使用了 Ivan 的“4行JQuery相册”教程，让我目前能够完成这个项目。以下是他的演示，展示了所有的工作过程：http://workshop.rs/demo/gallery-in-4-lines/

我已经遇到了一个问题，我想添加上一个和下一个按钮。

由于图片的名称为'1-large.jpg'、'2-large.jpg'、'3-large.jpg'等，所以我尝试使用 .slice() 去提取第一个数字，然后加上或减去 1，从而得到下一张/上一张图像，但结果并不理想，因为我的 JavaScript 技能有限，而且我也不知道这是否是最好的方法。

我的问题是：使用 .slice() 是正确的方法吗？还是有更简单的代码可以用在我的按钮上？

非常感谢任何帮助。

- RB101

Answer 1

如果你只想要字符串的第一个字符：

var name = "1-large.jpg";
var i = name[0];
// i is now '1'

但是对于 i > 9，这种方法不起作用，因此使用 split 更好：

var i = name.split('-')[0];
// i is now '1'

var i = "1023-large.jpg".split('-')[0];
// i is now '1023'

将字符串转换为整数：

var num = parseInt("23", 10);
// num is now the number 23, not a string

- Sean

---

感谢您的快速回复，Sean。我已经使用您建议的代码更新了我的内容，但是在将变量插入图像URL时，我错过了一些东西：$('#arrow-right').click(function(){ var i = '#largeImage'.split('-')[0]; var i = i++; $('#largeImage').attr('src', 'images/illustration/' + i + '-large.jpg'); });它似乎返回一个url“images/illustration/NAN-large”，这让我想到了我如何插入变量....？ - RB101

这段代码：var i = '#largeImage'.split('-')[0]; 看起来应该是 var i = $('#largeImage').attr('src').split('-')[0];。但为了确保，使用 console.log($('#largeImage').attr('src')); 输出 $('#largeImage').attr('src') 的值，在 Firefox 或 Chrome 中按 F12 查看控制台，并确保它看起来像 "1023-large.jpg"。 - Sean

我非常感谢Sean的帮助。我刚试了一下，结果是images/illustration/NaN-large.jpg。我完全忽略了你提到的转换parseInt步骤，所以我在脚本中加入了它，将其更改为var i = parseInt(i, 10);，并直接放在var i = i++行之后。但还是没有成功。 - RB101

是的！懂了！因为我在使用完整的图像路径时，例如images/illustration/1-large.jpg，当发生 split('-')[0] 时，它会留下整个前面部分 images/illustration/1，这导致 NaN（如果有人让我给NaN加1并期望得到一个数值，我也会疯掉）。所以我将其更改为split('/')[2]，然后使用parseInt提取数字。再次感谢Sean帮我找到正确的方向。干杯！ - RB101