增加 HTML 字符串中数字的值（jQuery）答案

【问题标题】：Increase value of digit within HTML string (jQuery)增加 HTML 字符串中数字的值（jQuery）
【发布时间】：2013-05-12 21:51:27
【问题描述】：

我在一个文件夹中有一堆图像，它们都以数字命名。第一个在文档加载时显示。

<img src="image/01.jpg" />

我想使用 jQuery 浏览图像。换句话说，我想将 HTML 转换为字符串，然后增加当前“01”的值。

到目前为止，我有：

$(document).ready(function(){
  $("button").click(function(){
    var $n = $("img").html(htmlString(17));
    $n.val(Number($n.val())+1);
  }); 
});

我确定我完全错误的一点是数字的选择（即 delcaring var $n。我试图将 HTML 转换为那里的字符串并沿字符计数，但我是甚至不确定这是否是正确的路线；我在任何地方都找不到类似的东西。

谢谢。

【问题讨论】：

您可以使用 data- 属性来存储当前和最大数量。使用jQuery拉取当前值，如果小于最大值则递增，然后设置图像的src。
htmlString(17) 在做什么？
@Andreas 我试图从 HTML 字符串中选择数字。我认为我以您选择 HTML 内容的方式做错了。

标签： javascript jquery html html-parsing

【解决方案1】：

var source = "image/01.jpg";
var number = source.split(".")[0].split("/")[1];
number = (number *1) + 1
var newsource = "image/" + number + ".jpg";

这就是你实际获取源代码的方式

var source = $("img").attr('src');

刚刚意识到这会生成 "image/2.jpg" ，你可以使用 data-number 属性，你可以重命名 1 - 9 的图像，但这给了你一个想法

【讨论】：

【解决方案2】：

你可以

1)在js变量中获取src值

2) 使用 substr 函数去掉“image/”部分。

3) 然后在 "." 上使用 split()取第一个数组槽的值。

4) 使用 intVal() 和

将其转换为整数

5) 然后增加值

【讨论】：

【解决方案3】：

img 元素没有 html 内容，除此之外，您使用 html 作为 setter 而不是 getter。您可以使用replace 方法替换src 属性的值：

$('img').prop('src', function(_, src) {
    return src.replace(/\d+/, function(n) {
        var num = +n + 1;
        return num.toString().length === 1 ? '0' + num.toString() : num;
    });
});

http://jsfiddle.net/Bb84Q/

【讨论】：

非常感谢，这似乎做到了。为了进一步理解这个答案，您能否解释一下代码的哪一部分选择了要更改的数字？里面有很多我以前没见过的。
@sanjaypoyzer 不客气，我用过正则表达式，/\d+/ 选择整数值。
啊，我明白了，谢谢。刚刚对正则表达式进行了一些阅读，非常有用。还有一个问题——“function(_, src)”中下划线的意义是什么？
@sanjaypoyzer _ 是index，prop 遍历所有选定的元素。