1

申し訳ありませんが、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で「.jpg」の前に文字列「_small」を配置する方法です。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 () {

window.resize =jQueryに組み込まれているサイズ変更ハンドラーの代わりに

この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 に答える