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

Posted 2023-02-23

【中文标题】我应该/如何使用 .slice() 在按下按钮时交换图像 scr？ （用于画廊中的下一个/上一个按钮）

【英文标题】：Should/How would I use .slice() to swap an image scr on a button press? (for next/previous button use in a gallery)

【发布时间】：2012-03-28 07:48:57

【问题描述】：

我很难过，真的可以对我一直在努力的这个画廊寻求帮助。我使用 Ivan 的 '4 lines of jquery gallery' 教程来了解我目前所处的位置。这是他的演示，它准确地展示了它是如何工作的http://workshop.rs/demo/gallery-in-4-lines/

我已经到了想要包含上一个和后退按钮的地步。

由于图像被命名为 '1-large.jpg'、'2-large.jpg'、'3-large.jpg'... 等等，我尝试使用 .slice() 获取第一个数字，然后添加1 或负 1，导致下一张/上一张图片，但由于我缺乏 javascript 技能，我什至不知道这是否是处理它的最佳方法。

我的问题是 - 是使用 .slice() 还是可以在按钮上使用更简单的代码？

任何帮助将不胜感激。

【参考方案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'

并将字符串转换为int：

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

【讨论】：

感谢肖恩的快速回复。我用你建议的代码更新了我的内容，但是在将变量插入图像 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' 这让我觉得这是我插入变量的方式......？

这个：var i = '#largeImage'.split('-')[0]; 看起来应该是 var i = $('#largeImage').attr('src').split('-')[0];。但要确保输出 $('#largeImage').attr('src') 和 console.log($('#largeImage').attr('src')); 的值，请按 F12 在 Firefox 或 Chrome 中查看控制台，并确保它看起来像“1023-large.jpg”

非常感谢肖恩的帮助。刚试了一下，我得到了images/illustration/NaN-large.jpg。我完全错过了您提到的转换 parseInt 步骤，因此我将其包含在脚本中，将其更改为 var i = parseInt(i, 10); 并将其直接放在 var i = i++ 行之后。没有运气。

是的！知道了！因为当split('-')[0] 发生时我正在使用像images/illustration/1-large.jpg 这样的完整图像路径，所以它离开了整个前面部分images/illustration/1，这导致了NaN（如果有人让我在NaN 上加1，我也会假发并期望一个数值）。所以我把它改成了split('/')[2]，然后用 parseInt 带出数字。再次感谢肖恩让我走上正轨。干杯。