javascript - 使用 jQuery 更改文件名结尾

Question

我目前正尝试在点击时更改图像路径末尾的数字。

$(".container-button").click(function(){
    $("img.picture").each(
            function(){
                var p = $(this).attr('src');
                var new_image = p.replace('3.jpg' || '2.jpg' || '1.jpg', '4.jpg');
                $(this).attr('src',new_image);
            }
        );
});

如果您看一下我的代码，我会执行以下操作:

• 单击时我在类中搜索图像源并将其存储在变量中
• 我创建了一个新变量，用于查找图像文件末尾的一组文件名，将其替换为 4.jpg，并将其存储在变量 new_image 中。
• 我查找源属性并将其切换为存储在 new_image 中的内容。

我看到的是，如果它在集合中找到第一个文件名但其他文件名被忽略，它只会查找替换。

我做错了什么？

Answer 1

OR 条件将在评估第一个字符串 '3.jpg' 后停止，并将忽略其他字符串。

要在正则表达式中使用 OR，您可以使用 | 运算符。 所以，可以使用(1|2|3)\.jpg。但是，字符类有点快，可以在其中使用范围。

$(".container-button").click(function() {
    $("img.picture").attr('src', function(i, value) {
        return value.replace(/[1-3]\.jpg$/i, '4.jpg');
    });
});

除此之外，attr() 可以与回调函数一起使用来更改所有匹配元素的 src 属性。

RegEx /[1-3]\.jpg$/i 将匹配

1. 1 到 3 之间的数字
2. 后跟.字符(这需要转义以匹配文字)
3. 跟在字符串末尾的jpg。
4. i 标志用于区分大小写匹配字符串。