2

イメージ src に「_grey」を追加して、ホバー時にイメージを切り替える簡単なイメージ スワップ クラスを作成しました。このコードは、ie6 以外のすべてのブラウザーで、サイト全体でうまく機能します。ここでは substr が適切に機能していないようです - 何かアドバイスをお願いします!?

次のようにコード -

$(document).ready(function() {
var initImg;    
    $('img.swapGrey').hover(function() {


        initImg = $(this).attr("src");  
        var imgType = (initImg).substr(-4);
        alert(initImg);
        var greyImg = initImg.slice(0, -4) + "_grey" + imgType;
        alert(greyImg);

        $(this).attr("src",greyImg);

            }, function() {
        $(this).attr("src",initImg);

    });


});
4

5 に答える 5

3

sliceではなく使用しsubstrます。substrは非標準ですが、sliceは ECMAScript 3 仕様で (負の位置を含めて) 指定されており、IE 6 を含むすべての主要なブラウザーでサポートされています。

于 2010-08-17T13:42:29.577 に答える
1

IE で正の開始位置を使用するだけです。

于 2010-08-17T13:40:46.413 に答える
1

IE は、 の引数で負の値をサポートしていませんsubstr。

于 2010-08-17T13:41:50.233 に答える
0

loadではなく、コードをイベントに入れてみてくださいready:

$(window).load(function(){
  // your code...
});

イベントを使用する理由は、loadイベントとは異なり、画像がページに完全に読み込まれるまでにあるためですready。

于 2010-08-17T13:39:45.293 に答える
0

(関数の効果を示すため) 必要以上に冗長ですが、test.jpg が img 要素の src である場合、基本的には test.jpg を test_grey.jpg に変更します。

    $(document).ready(function() {
        var initImg;
        $('img.swapGrey').hover(function() {


            initImg = $(this).attr("src");
            var len = initImg.length - 4;
            var imgType = initImg.slice(len);
            alert(":"+imgType+":");
            alert(initImg + " is " + len +":"+ imgType);
            var greyImg = initImg.slice(0, -4) + "_grey" + imgType;
            alert(greyImg);

            $(this).attr("src", greyImg);

        }, function() {
            $(this).attr("src", initImg);
      });
 });
于 2010-08-17T14:08:08.173 に答える