1

これが私のコードです。THUMB イメージの 'src' から最初の文字または数字を取得し、大きなバージョン (1 から 5 までの番号) のソースとして設定する必要があると思います。この後、大きな画像が表示されるはずです。 

$('img.thumb').mouseover(function (){
    $(this).effect('bounce', 500, function(){
        var src = 'images/screens/' + $(this).attr('src').substr(0,1) + '.jpg';
        $('.slideShow img').attr('src' ,src);
        $('.slideShow img').toggle('bounce').css('margin-top','2.5%');
        });
    });

問題は、ページ (Google Chrome を使用) を読み込むと、すべての画像に対して画像ソースが次のように設定されるため、大きな画像が表示されないことです。

ここで何が間違っていますか？

4

1 に答える 1

2

最初の数字または文字のみを要求したため、次のようにします。

$('img.thumb').mouseover(function (){
    $(this).effect('bounce', 500, function(){
        var src = 'images/screens/' + $(this).attr('src').match(/(\/|^)([a-z0-9])[^\/]*$/i)[2] + '.jpg';
        $('.slideShow img').attr('src' ,src);
        $('.slideShow img').toggle('bounce').css('margin-top','2.5%');
    });
});

私がしたことは、正規表現を使用して、最後のスラッシュまたはスラッシュがない場合は文字列の先頭の後の最初の数字または文字を見つけることでした。このようにして、サムネイルのソースを「/images/screens/1-thumb.jpg」または「1-thumb.jpg」にすることができ、どちらの場合も正規表現から「1」が返されます。

1 文字のファイル名に制限されているため、これを行うためのはるかに優れた方法があります。親指に接頭辞/接尾辞を使用することを検討し、接頭辞/接尾辞を削除するだけです。この場合、次のよりシンプルでクリーンなコード行を使用できます。

var src = $(this).attr('src').split('-thumb').join('');

フォルダーまたはファイル名がない限り、これは、次のように が追加-thumbされた任意のファイル名をサポートします。-thumb/images/screens/my-image-thumb.jpg/images/screens/my-image.jpg

于 2012-12-31T17:58:20.237 に答える