使用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中。
• 我查找source属性并将其切换为存储在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标志用于匹配字符串case-in-sensitively。