ボタンのマウスホバーとクリックを共存させる

例えば、オン・オフの画像があって、以下のような動きをしたかった。
1. マウスホバーでオン・オフが切り替わる
2. クリックでオンがオフ、オフがオンに切り替わる

これだけのことなんだけど、2の時、それをマウスホバーしたときにリンクの切れた画像が表示されてしまって、うまくいかなかった。

マウスホバーのスクリプトと、クリックのスクリプトを単に一緒にするだけだとだめだった

まずはそれぞれのスクリプトから
前提として、オンの時の画像名には_oを末尾につけています。
img_◯◯_o.pngみたいな

$(function(){
    var $img = $('.img');
    var src = $img.attr('src');
    var srcOn = src.substr(0, src.lastIndexOf('.')) + '_o' + src.substring(src.lastIndexOf('.'));
    var srcOff = src.substr(0, src.lastIndexOf('.')) +  src.substring(src.lastIndexOf('.'));

    $img.hover(function() {
        $(this).attr('src', srcOn);
      }, function(){
        $(this).attr('src', srcOff);
    }) 
})

$(function(){
    var $img = $('.img');
    var src = $img.attr('src');
    var srcOn = src.substr(0, src.lastIndexOf('.')) + '_o' + src.substring(src.lastIndexOf('.'));
    var srcOff = src.substr(0, src.lastIndexOf('.')) +  src.substring(src.lastIndexOf('.'));

    if ($(this).hasClass('on')) {
        $(this).removeClass('on');
        $(this).attr('src', srcOff);
    }else {
        $(this).addClass('on');
        $(this).attr('src', srcOn);
    }
})

このままだと、ボタンがオフの時はいいけど、オンになってしまっていると、_oが付いているものにさらに_oをつけることになってしまうので、そんな画像はねぇよって怒られた・・・。これだと困ります。

フラグを使って状態を判断

フラグでオフの時はfalse，オンの時はtrueとして、今の状態がオンなのかオフなのか判断すればいいみたい。

ということで、最終的なコードはこうなりました。

$(function(){
    var flag = false;
    var $img = $('.img');
    var src = $img.attr('src');
    var srcOn = src.substr(0, src.lastIndexOf('.')) + '_o' + src.substring(src.lastIndexOf('.'));
    var srcOff = src.substr(0, src.lastIndexOf('.')) +  src.substring(src.lastIndexOf('.'));

    // クリック時
    $img.click(function(e) {
      e.preventDefault();
       // フラグがtrue(オン)だったら 
      if (flag) {
        $(this).attr('src', srcOff);
         // フラグをfalse(オフ)に戻す
        flag = false;
       // フラグがfalse(オフ)だったら 
      }else {
        $(this).attr('src', srcOn);
         // フラグをtrue(オン)に
        flag = true;
      }
    })

    //マウスホバー時
    $img.hover(
      function() {
         //状態がオンの時、画像のURLを元に戻して、状態がオフの時、_oをつける
        if(flag){
          $(this).attr('src', srcOff);
        }else {
          $(this).attr('src', srcOn);
        }
      }, function(){
         //状態がオンの時、_oをつけて、状態がオフの時、画像のURLを元に戻す
        if(flag){
          $(this).attr('src', srcOn);
        }else {
          $(this).attr('src', srcOff);
        }
      }
    )
})

これで理想とする動きになりました。

ポイントはflagで状態を判断すること。
良かったら参考にしてください。