从 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;
}));

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个参数时设置给定的属性。所以基本上，在应用了replace 方法后，我将src 属性设置为相同的src。

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

replace 方法的第二个参数中的函数对象将整个匹配 (s) 作为参数，后跟 N 个捕获组 (m = \d+ = 一个或多个数字字符)。因为我只有一个capturing group，所以我给函数提供了2个参数，这样我就可以使用捕获的组并在函数对象内递增它，返回递增的数字+.jpg以替换原始源中的number.jpg。

由于您的代码无法正常工作，我唯一的猜测是您没有从字符串中删除所有非数字字符，因此当 ++ 增量运算符尝试强制进行类型转换时，它只会返回一个NaN，因为给定的字符串无法解析为整数。使用我的替换方法，它只从字符串中获取数字并增加它，独立于字符串的其余部分。

---

编辑：

我发现你的代码的主要问题，$("#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);

Answer 3

您需要使用javascript的parseInt()将字符串转换为数字，然后将其递增。