0

適切に機能する正規表現が必要ですが、現在持っている正規表現は壊れています。

目標は

画像の通常の src は次のとおりです: Image.png

ホバー時に jQuery を使用すると、画像の src が動的に検索され、ImageName-Dn.png に置き換えられます。

ホバーオフすると、 ImageName.png に戻ります

私の現在の解決策：

$(document).ready(function(){
   $(".myButton").hover(
        function () {
            var s = $(this).attr('src');
            s = s.substring( 0, s.search(/(\.[a-z]+)$/) ) + '-Dn' + s.match(/(\.[a-z]+)$/)[0]; 
            $(this).attr('src', s);
        },
        function () {
            var o = $(this).attr('src');
            o = o.replace(/-Dn\./, '.'); 
            $(this).attr('src', o);
        }

    );
});

ただし、何らかの理由で、ある時点で画像が設定されImageName-Dn.png、その後、台無しになり、設定されImageName-Dn-Dn.pngます。ヘルプはありますか？

4

3 に答える 3

1

簡単な修正は、文字列にまだ-Dnが含まれていないかどうかをテストすることです。

if (!string.match(/-Dn\./))

また、正規表現を使用すると、文字列を手動で分割して複数の検索を行う必要がありません。グループ化を使用して、次のような単一の置換命令で必要なものを受け取ることができます。

string.replace(/(.*)\.(.*)/, "$1-Dn.$2")

Javascriptの正規表現を読みたい場合：http：//en.wikibooks.org/wiki/JavaScript/Regular_Expressions

于 2009-08-05T03:20:23.030 に答える
0

マウスオーバー効果のためにこれを行っていますか？画像スプライトを使用しないのはなぜですか? 事実上、両方のバージョンの画像を並べて含む 1 つの画像を作成し、それを表示する要素の背景に設定するだけです。

たとえば、10x10 の画像とそのマウスオーバー バージョンは、10x20 の画像になり、マウスオーバー バージョンの上にオリジナルが表示されます。

次に、背景画像を 10x20 画像に設定して 10x10 div を作成できます。上位 10x10 のみが表示されるため、元のバージョンのみが表示されます。

次に、javascriptで、イベントに呼び出しを簡単に添付できます

 $(el).style.backgroundPosition = '0px -10px';

ホバーイベントで

$(el).style.backgroundPosition = '0px 0px';

リセットする

これにより、マウスオーバーで背景が上に移動します。これは、単純な画像の交換のために正規表現を処理するよりもクリーンであるだけでなく、ページがロードする必要があるファイルの数も減らします。

お役に立てれば！

于 2009-08-05T03:15:56.457 に答える
0 
   function () {
        var s = $(this).attr('src');
        if( !s.match(/-Dn\.[a-z]+$/) ) {
          s = s.substring( 0, s.search(/(\.[a-z]+)$/) ) + '-Dn' + s.match(/(\.[a-z]+)$/)[0]; 
          $(this).attr('src', s);
        }
    },
    function () {
        var o = $(this).attr('src');
        o = o.replace(/-Dn\./, '.'); 
        $(this).attr('src', o);
    }

(条件追加)

于 2009-08-05T03:18:04.173 に答える