3

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

4

3 回答 3

4

问题实际上是您在增加数字时正在创建一个新变量。这一行是错误的：

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

演示

于 2012-08-02T08:49:37.740 回答
1

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

$("#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 个参数时设置给定的属性。所以基本上，在将方法应用到它之后，我将src属性设置为相同。srcreplace

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

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

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

编辑：

我发现了您的代码的主要问题，$("#image").prop("src")检索了图像的完整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);
于 2012-08-02T09:09:02.617 回答
0

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

于 2012-08-02T08:51:14.520 回答