1

了解しました。2つの画像を切り替えようとしています。1つはアニメーションGIFで、もう1つはjpgです。基本的に、クライアントは自分の製品の機能に関するこれらのアニメーションGIFを大量に必要としていますが、非常に混雑するため、オンとオフを切り替えるスイッチを追加したいと思います。それで、クラスのあるすべての画像があるかどうか疑問に思いました。残りのsrcはすべて異なるため、トグルを設定して、すべての画像の最後の3文字をgifからjpgに変更できますか。

これは明らかに機能しませんが、私はあなたが論理に従うことができることを望んでいます。

$('img.img-toggle').click(function() {
if () //If the image ends in .jpg
{
     //Somehow strip the attribute of .jpg
     //Somehow append the attribute to add .gif 
} else {
    //Somehow stip the attribute of .gif
    //Somehow append the attribute to add .jpg
}
});​

助言がありますか？私の論理がばかげているなら、別のオプションもいいでしょう。私はこれにちょっと新しいです。私はいくつかの異なることを試みましたが、なんとか理解することができませんでした。

よろしくお願いします、ケビン

4

6 に答える 6

3

画像のsrc文字列から最後の3文字または4文字を取得して、比較することができます。

$('img.img-toggle').click(function() {
    var ending = this.src.slice( -3 );

    switch( ending ) {
       case 'jpg': 
           this.src = this.src.replace( /jpg$/, 'gif' );
           break;
       case 'gif': 
           this.src = this.src.replace( /gif$/, 'jpg' );
           break;
    }
});

switch/case将来さらにフォーマットがあるかもしれない場合に備えて、私は使用しました。

.toggle()別のオプションは、次のような方法でjQuerysメソッドを使用することです。

$('img.img-toggle').toggle(function() {
    this.src = this.src.replace( /jpg$/, 'gif' );
}, function() {
    this.src = this.src.replace( /gif$/, 'jpg' );
});

.toggle()提供する必要のある2つの機能を自動的に切り替えます。

于 2012-12-20T16:58:11.550 に答える
2

これを試して：

$('img.img-toggle').click(function() {
    var $img = $(this);
    var src = $img.prop('src');
    if (src.match(/\.jpg$/)) {
        $img.prop('src', src.replace(/\.jpg$/, '.gif'));
    } else {
        $img.prop('src', src.replace(/\.gif$/, '.jpg'));
    }
});

フィドルの例

于 2012-12-20T16:58:37.917 に答える
1

ページに多くのimg.img-toggle要素がある場合は、各要素でイベントをリッスンするよりも、イベントの委任を使用する方が適切です。

イベント委任を使用すると、共有の親に単一のイベントリスナーを登録します。これは通常、大量の異なるリスナーを登録するよりも賢明に優れています。

jQueryはイベントの委任をサポートしています。

$("#a_common_ancestor").on("click", "img.img-toogle", handler);

handlerこれを念頭に置いて、関数内にログインを記述しましょう。

function handler () {
  // `this` refers to the element that was clicked;
  // it is an image, so it has an `src` attribute.
  this.src = this.src.replace(/\.(jpg|gif)$/, function (_, capture1) {
    return capture1 === "jpg"
      ? ".gif"
      : ".jpg";
  });
}
于 2012-12-20T16:58:13.110 に答える
1

1つの方法は、このようなことを行うことです...

$('img.img-toggle').click(function() {
    var src = $(this).attr("src");
    if (src.indexOf(".jpg") != -1) //If the image ends in .jpg
    {
        src = src.replace(".jpg", ".gif");
    } else {
        src = src.replace(".gif", ".jpg");
    }
    $(this).attr("src", src);
});
于 2012-12-20T16:57:56.550 に答える
1

ここにあるすべての画像に対してこの操作を実行する場合は、次のようになります。

$('img.img-toggle').click(function() {
    ( ".imgClass" ).each( function( ) {

        var src = $(this).prop( "src" );

        if( /\.jpg$/i.test( src ) ) {
            $(this).prop( "src", src.replace( /\.jpg$/, ".gif" ) );
        } else {
            $(this).prop( "src", src.replace( /\.gif$/, ".jpg" ) );
        }
    });
});
于 2012-12-20T17:04:49.487 に答える
0 
$('img.img-toggle').click(function() {
    src = $(this).attr('src');
    if (src.substr(src.length - 4) == ".jpg") //If the image ends in .jpg
    {
        src = src.replace(".jpg", ".gif");
    } else {
        src = src.replace(".gif", ".jpg");
    }
});​
于 2012-12-20T17:01:10.470 に答える