从jQuery变量中剥离数据，增加剩余的数量，将剥离的数据放回变量中

Question

我试图在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”的值。 您将给予的任何帮助将不胜感激。

Answer 1

问题实际上是在增加数字时创建一个新变量。 这条线错了：

var imagePath = imagePath ++;

这会更好：

var imagePath = ( $("#image").prop("src") );
imagePath = imagePath.replace('images/big/', '');
imagePath = imagePath.replace('.jpg', '');
imagePath++;
imagePath = "images/big/"+imagePath+".jpg";
$("#image").attr("src", imagePath);  

DEMO

Answer 2

您有太多代码来替换单个数字。

$("#image").attr("src", $("#image").attr("src").replace(/\d/, function(s) {
    return +s+1;
}));

小提琴

或者更坚固的版本（确保数字后跟.jpg并且可以接受多于一位数的数字）：

$("#image").attr("src", $("#image").attr("src").replace(/(\d+)\.jpg/, function(s, m) {
    return (parseInt(m, 10)+1) + '.jpg';
}));

小提琴

parseInt()将字符串解析为指定基数/基数的整数 - 10对应于小数。 它已经完成，因此JS引擎不会假设一个数字应该是八进制，如果它以0开头为例。 好吧，总是当你使用小数时，使用parseInt(myNumber, 10)来确保它被解析为十进制整数。

您应该熟悉的.attr ，它在传递1个参数时检索给定的HTML属性，并在传递2个参数时设置给定的属性。 所以基本上，我在应用了replace方法后，将src属性设置为相同的src 。

string.replace方法有2个参数，在这种情况下，我使用正则表达式（ 正则表达式 ）匹配数字字符（ \\d是表示[0-9]的字符类），后跟文字.jpg字符串并替换它们匹配的数字加1。

在的第二参数的函数对象replace方法采用作为参数的整场比赛（ s ，随后N个捕获组的）（ m = \\d+ =一个或多个数字字符）。 由于我只有一个捕获组 ，我给函数提供了2个参数，因此我可以使用捕获的组并在函数对象内增加它，返回增加的数字+ .jpg以替换原始源中的number.jpg 。

由于你的代码没有工作的原因，我唯一的猜测是你没有从字符串中删除所有非数字字符，因此当++增量运算符试图强制进行类型转换时，它只返回一个NaN ，就像给定的字符串无法解析为整数。 使用我的替换方法，它只接受字符串中的数字并递增它，与字符串的其余部分无关。

---

编辑：

我找到了代码的主要问题， $("#image").prop("src")检索图像的完整 URL，这就是为什么，正如我上面的段落暗示的那样，你没有删除所有非数字字符，它无法评估为整数。 用.attr替换.prop可能允许您的原始代码也能正常工作。

虽然在使用后增量运算符++之后不应该为自己分配变量，并且在同一范围内多次声明相同的变量名称被认为是不好的做法（大多数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);

Answer 3

你需要使用javascript的parseInt（）将字符串转换为数字，然后递增它。