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

Posted 2023-02-25

【中文标题】从 jQuery 变量中剥离数据，增加剩余的数字，将剥离的数据放回变量中

【英文标题】：Strip Data from a jQuery Variable, Increment the Number that's left, Put the stripped data back in the Variable

【发布时间】：2012-08-02 08:47:15

【问题描述】：

我正在尝试在 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”值。您可以提供的任何帮助将不胜感激。

【问题讨论】：

+1 礼貌的问题与源和输出示例。

如果它返回NaN，很可能您没有过滤掉src 字符串中的所有非数字字符。您能否向我们提供完整的图像标签来源或尝试在jsfiddle.net 上重现该场景？

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

【讨论】：

永远记得指定你的基数，即 parseInt(imagePath, 10);或使用 Number(imagePath);

newCount++ 就够了，不用再赋值给自己了 :)

我很确定增量运算符会强制将类型转换为整数 (fiddle)，但如果这可行..

不敢相信我之前没有发现...我已经更新了我的答案。

额外的 var 关键字并不重要，它们只是确保以下 var 名称属于本地范围。 IMO OP 在调用函数或其他东西时遇到问题。

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

【讨论】：

感谢 Fabrício，第二个代码块运行良好。我对 jQuery 有点陌生。您能否向我解释一下 (/d+) 在替换函数中是如何工作的，以及 parseInt 语法是如何工作的？非常感谢。

@baxterma 给我一分钟，因为还有很多东西要写。 =]

@baxterma 我不是很好解释，但我已经付出了很多努力。如果您需要对任何主题进行更具体的解释，请告诉我。 =]

我想我明白了，所以 \d 只是代表 0 到 9 之间的任何数字。替换正在寻找它传递的字符串中的 [any number].jpg。然后它将它传递给 parse 函数，该函数获取数字然后递增它。然后替换将 .jpg 重新附加到递增的数字，并将其返回到 img 标签的 src。与我的代码相比，优势在于您的代码可以查找任何数字，并且会智能地过滤该数字。我不明白的是，它如何过滤“图像/大”？附言你更善于解释你的想法！ :)

没错！ :) images/big 保留为原始字符串的一部分，我的 replace 函数仅替换 [number].jpg 部分，其余部分保持原样。 =]

【参考方案3】：

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