1

对不起，我是 jquery 的新手。我在标签上有这个代码：

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

如果用户调整他们的网络浏览器的大小，我想更改流体图像类上的所有 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();  
        });  

        });

请帮忙！

4

5 回答 5

1

你可以使用

var source = $(this).attr("src");
$(this).attr("src",source.replace(".jpg","_small.jpg"));
于 2012-05-16T09:12:32.267 回答
0

尝试迭代它：

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

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

            });
        }
于 2012-05-16T09:14:05.800 回答
0 
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"));
   });
}
于 2012-05-16T09:14:49.633 回答
0

尝试这个 ：

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 () {

而不是jQuerywindow.resize =中的内置调整大小处理程序

该if语句正在检查'700'您何时应该检查一个数字（尽管它可以与 一起使用'700'）：

if (contentwidth < 700) {

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

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

这使用.each()

我引入了一个变量，以usingsmall确保只执行必要的工作

于 2012-05-16T09:14:57.893 回答
0 
$('img.fluidimage').attr('src', function(i, oldSrc){
   this.src = oldSrc.replace('.jpg','_small.jpg');
})
于 2012-05-16T09:15:24.433 回答