Question

抱歉，我是jquery的新手。我在标签上有这个代码：

<img class="fluidimage" src="img/picture1.jpg"/> 
<img class="fluidimage" src="img/goodimage1.jpg"/>

如果用户调整其Web浏览器大小，我想更改fluidimage类上的所有src。所以我想要的输出是：

<img class="fluidimage" src="img/picture1_small.jpg"/> 
<img class="fluidimage" src="img/goodimage1_small.jpg"/>

我的问题是如何在jquery中将字符串“_small”放在“.jpg”之前？我试过写jquery函数，但它不起作用。

$(document).ready(function() {  
        function imageresize() {  
            var contentwidth = $('#container').width(); 
            if ((contentwidth) < '700'){ 
                $('.fluidimage').attr('src','img/picture1.jpg');
                $('.fluidimage').attr('src', $(this).attr('src').replace('.jpg', '_small.jpg'));
            } else {  
            $('.fluidimage').attr('src','img/picture1.jpg');  
            }  
        }  

        imageresize();     

        $(window).bind("resize", function(){  
            imageresize();  
        });  

        });

请帮忙！

Answer 1

您可以使用

var source = $(this).attr("src");
$(this).attr("src",source.replace(".jpg","_small.jpg"));

Answer 2

尝试迭代它：

        if ((contentwidth) < '700'){
            $('.fluidimage').each(function() {

               $(this).attr('src','img/picture1.jpg');
               $(this).attr('src', $(this).attr('src').replace('.jpg', '_small.jpg'));

            });
        }

Answer 3

if ((contentwidth) < '700')
{ 
   $('.fluidimage').each(function(){
       $(this).attr('src', str_replace(".jpg", "_small.jpg"));
   });
} 
else 
{  
   $('.fluidimage').each(function(){
       $(this).attr('src', str_replace("_small.jpg", ".jpg"));
   });
}

Answer 4

试试这个：

var usingsmall = false;
$(document).ready(function () {
    $(window).resize(function () {
        var contentwidth = $('#container').width();
        if (contentwidth < 700) {
            if (!usingsmall) {
                $('.fluidimage').each(function () {
                    $(this).attr('src', $(this).attr('src').replace('.jpg', '_small.jpg'));
                    usingsmall = true;
                });
            }
        } else {
            if (usingsmall) {
                $('.fluidimage').each(function () {
                    $(this).attr('src', $(this).attr('src').replace('_small.jpg', '.jpg'));
                    usingsmall = false;
                });
            }
        }
    })
})

我已经改变了相当多的代码!!你可以使用

$(window).resize(function () {

而不是window.resize =内置的resize handler in jQuery

if语句在您应该检查某个号码时检查'700'（尽管它可以与'700'一起使用）：

if (contentwidth < 700) {

最后的更改是使用类fluidimage迭代图像并更改每个src属性：

$('.fluidimage').each(function() {

这使用.each()

我已经介绍了一个变量usingsmall，这确保了只执行必要的工作

Answer 5

$('img.fluidimage').attr('src', function(i, oldSrc){
   this.src = oldSrc.replace('.jpg','_small.jpg');
})

使用jquery更改多个图像扩展名

5 个答案: