2

クラスを変更して次のクリックまで保持するattr関数を取得できません。また、新しいmouseenterおよびmouseout関数は使用されません。私が間違っていることについて何か考えはありますか？

HTML

<a href="" id="play" class="pause"><div id="playctrl"><img id="pausectrl" class="play" src="images/play1.png" ></div></a>

JQUERY

$('.pause').click(function(){
    $('#pausectrl').attr({
        src: 'images/pause1.png',
        class: 'paused' 
    });

    return false;
});

$('.play').mouseenter(function(){
    $(this).attr('src','images/play2.png');
}).mouseout(function(){
    $(this).attr('src','images/play1.png');
});

$('.paused').mouseenter(function(){
    $(this).attr('src','images/pause2.png');
}).mouseout(function(){
    $(this).attr('src','images/pause1.png');
});

これがページのサンプルへのリンクです。MMAスライドショーコントロールのサンプル

4

4 に答える 4

4

srcリンクを設定しています。代わりにこれを実行します。

$(this).find('img').attr('src', 'myimage.png');
于 2011-05-12T17:16:02.327 に答える
2

あなたが言う時：

また、新しいmouseenterおよびmouseout関数は使用されません

コードを実行するとき、オブジェクトにはまだクラスがないため、イベントハンドラーにバインドされていないためだと思います。ライブ関数を使用して、イベントを正しくバインドできます。

$('.pause').click(function(){
    $('#pausectrl').attr({
        src: 'images/pause1.png',
        class: 'paused' 
    });
  return false;
});

$('.play').live("mouseenter", function() {
  $(this).attr('src','images/play2.png');
});

$('.play').live("mouseout", function(){
  $(this).attr('src','images/play1.png');
});

$('.paused').live("mousenter", function() {
  $(this).attr('src','images/pause2.png');
});


$('.paused').live("mouseout", function(){
  $(this).attr('src','images/pause1.png');
});
于 2011-05-12T17:22:52.333 に答える
1

間違ったタグにsrcを設定している場合は、代わりに次のコードを使用してください。

$("img.play", $(this)).attr('src', 'thenewimage.png');

部分'$（this）'は、jQueryがクラス'play'で画像を見つけようとしている開始位置です。これは私の意見では効率的な解決策です。

完全なjsコード：

$('.play').mouseenter(function(){
  $("img.play", $(this)).attr('src','images/play2.png');
  }).mouseout(function(){
  $("img.play", $(this)).attr('src','images/play1.png');
  });

HTMLは同じままです。

$('.paused').mouseenter(function(){
  $("img.play", $(this)).attr('src','images/pause2.png');
  }).mouseout(function(){
  $("img.play", $(this)).attr('src','images/pause1.png');
  });

`

于 2011-05-12T17:17:49.907 に答える
1

2番目の部分の場合：

$('.paused').mouseenter(function(){
  $(this).attr('src','images/pause2.png');
  }).mouseout(function(){
  $(this).attr('src','images/pause1.png');
});

jQueryでクラス名を設定し、画像の置換にCSSと画像スプライトを使用することをお勧めします。

何かのようなもの：

.paused {background: url(/images/paused.png) 0 0 no-repeat;}
.paused:hover {background-position: 0 15px;} /* Or whatever the position in the sprite */
于 2011-05-12T17:25:13.583 に答える