我试图在jQuery中编写脚本,该脚本首先使用图像标签的src(ID为“#image”)。
然后去除图像路径的第一部分(“images / big /”)和图像扩展名(“.jpg”)。这仅留下图像名称,该图像名称只是一个数字(范围从1到7)。
然后,将该数字加1。
然后将图像路径和图像扩展名(开始时已删除的内容)放回正确的位置。然后将此新路径分配给img标签(ID为“#image”)
本质上,脚本旨在增加作为图像名称的数字。
这是我设法编写的代码:
var imagePath = ( $("#image").prop("src") );
var imagePath = imagePath.replace('images/big/', '');
var imagePath = imagePath.replace('.jpg', '');
var imagePath = imagePath++;
var imagePath = "images/big/"+imagePath+".jpg";
$("#image").attr("src", imagePath);
可惜的是,它无法正常工作,它似乎只返回“NaN”值。您能提供的任何帮助将不胜感激。
最佳答案
您的代码太多,无法替换单个数字。
$("#image").attr("src", $("#image").attr("src").replace(/\d/, function(s) {
return +s+1;
}));
Fiddle
或更坚固的版本(确保数字后面跟着
.jpg
,并且可以接受多于一个数字的数字):$("#image").attr("src", $("#image").attr("src").replace(/(\d+)\.jpg/, function(s, m) {
return (parseInt(m, 10)+1) + '.jpg';
}));
Fiddle
parseInt()
将字符串解析为具有指定基数/基数的整数-10
对应于小数。这样做是为了使JS引擎不假设数字以八进制表示(例如,它以0
开头)。好吧,总是在使用小数时,请使用parseInt(myNumber, 10)
来确保将其解析为十进制整数。您应该熟悉的
.attr
,它在传递1个参数时检索给定的HTML属性,并在传递2个参数时设置给定属性。因此,基本上,我将src
方法应用于该属性后,将src
属性设置为相同的replace
。string.replace
方法采用2个参数,在这种情况下,我使用正则表达式(Regular Expression)来匹配数字字符(\d
是代表[0-9]
的字符类),然后匹配文字.jpg
字符串,并将其替换为匹配的数字并加1。replace
方法的第二个参数中的函数对象将整个匹配项(s
)后跟N个捕获组(m
= \d+
=一个或多个数字字符)作为参数。因为我只有一个capturing group,所以我给函数提供了2个参数,因此我可以使用捕获的组并将其在函数对象中递增,返回递增的数字+ .jpg
来替换原始源中的number.jpg
。并且由于您的代码无法正常工作的原因,我唯一的猜测是您没有从字符串中去除所有非数字字符,因此,当
++
增量运算符尝试强制进行类型转换时,它只会返回NaN
,如给定字符串无法解析为整数。使用我的replace方法,它仅从字符串中获取数字并对其进行递增,而与字符串的其余部分无关。编辑:
我发现了您代码的主要问题,
$("#image").prop("src")
检索了图像的 FULL URL,这就是为什么正如我上面的段落所暗示的那样,您没有删除所有非数字字符,并且无法将其评估为整数。用.prop
替换.attr
可能也会使您的原始代码也能正常工作。尽管在使用后递增运算符
++
并在同一作用域中多次声明相同的变量名称后,您不应该为其分配变量,这被认为是不正确的做法(大多数JS解释器会忽略重新声明,但这是草率的编码)。因此,该代码的另一个更正版本:
var imagePath = $("#image").attr("src"); //use .attr as .prop returns full URL
imagePath = imagePath.replace('images/big/', '').replace('.jpg', '');
imagePath++;
imagePath = "images/big/"+imagePath+".jpg";
$("#image").attr("src", imagePath);