2

私は現在、マウスオーバーとマウスアウト機能をjqueryで動作させるのに問題があります。「images/doomsday.jpg」と呼ばれる2つの画像と「keep_calm.png」と呼ばれるもう1つの画像があり、マウスが上にあるときに交換し、そうでないときに元に戻します。私は現在使用しようとしているコードを含めました。だれかが問題を見つけて、どこが間違っているかを確認できますか?

$(function() {
$("images/doomsday.jpg")
    .mouseover(function() { 
        var src = $(this).attr("src").match(/[^\.]+/) + "images/keep_calm.png";
        $(this).attr("src", src);
    })
    .mouseout(function() {
        var src = $(this).attr("src").replace("images/keep_calm.png");
        $(this).attr("src", src);
    });

});

4

4 に答える 4

7

あなたのセレクターは間違っています。セレクターについては、こちらで学習できます。

画像交換のデモです。

コード :

$('document').ready(function() {

  $('img').on({
    'mouseover' : function() {
      $(this).attr('src','http://media02.hongkiat.com/css3-code-slim/css3-markup.jpg');
    },
    mouseout : function() {
  $(this).attr('src','http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png');
    }
  });
});
于 2013-01-07T11:42:57.013 に答える
1

多分このデモのようなもの：http ：//jsfiddle.net/m4WuU/JquerytoggleClassを使用するだけ

HTML

 <div class="holder"><div>

CSS：

 .holder { 
     background-image:url('images/keep_calm.png');         
  }


.swapHolder { 
   background-image:url('images/doomsday.png'); 
 }

JS：

$('.holder').on('hover', function () {  
   $('.holder').toggleClass('swapHolder'); 
});
于 2013-01-07T11:53:36.220 に答える
1

使用されたセレクターはありませんでした。最終的なコードは次のようになります。

HTML

<div> <img src="images/doomsday.jpg" id='myimage' /> </div>

Javascript

$('document').ready(function() {
$(function() {
$("#myimage")
    .mouseover(function() { 
        var src = $(this).attr("src").match(/[^\.]+/) + "images/keep_calm.png";
        $(this).attr("src", src);
    })
    .mouseout(function() {
        var src = $(this).attr("src").replace("images/keep_calm.png");
        $(this).attr("src", src);
    });
});
});
于 2013-01-20T10:02:40.660 に答える
0

どうやらセレクターが間違っているようです。たとえば$("#imageid")、画像IDが変更する画像のIDである場合に使用する必要があります。

于 2013-01-07T11:39:18.260 に答える