使用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.