0

お世話になっております。

現在レスポンシブサイトの制作をしているのですが、画像のonoutが切り替わるjqueryを
960px以上の際のみ有効になるように記述したのですが効きません。

$(function(){
  if($(window).width() > 960) {
    $("img,input[type='image']").hover(
      function(){
        if ($(this).attr("src")){
          $(this).attr("src",$(this).attr("src").replace("_out.", "_on."));
        }
      },
      function(){
        if ($(this).attr("src") && !$(this).hasClass("current") ){
          $(this).attr("src",$(this).attr("src").replace("_on.", "_out."));
        }
      }
    );
  }
});

if($(window).width() > 960)という記述自体は他のJqueryには効きますし、
if($(window).width() > 960)を外せば、画像のon outの記述も普通に効きます。

この二つが合わさったら何か問題があるのでしょうか?
当方Javascriptは全くの素人です。

何卒ご教授の方よろしくお願いいたします。

1 件の回答 1

1

恐らく、画像にホバリングした時点の画面サイズで"on out"を切り替えたいのではないでしょうか?

上記のサンプルコードだと、htmlファイルを読み込んだ時点の画面サイズで、ホバリングのイベント登録がされたり、されなかったりしているようです。
簡単に言うと、ブラウザの更新ボタンを押した時、画面サイズが960px以上だと期待する操作になって、960px以下だと全く反応しないかと思います。以降は画面サイズを変えても期待する操作にならないかと。

そこで、画像にホバリングした時点で画面サイズを取得し、その数値に併せてon out を切り替える為には、

   $(function(){

        $("img,input[type='image']").hover(
                function(){
                    if($(window).width() > 960) {
                        if ($(this).attr("src")) {
                            $(this).attr("src", $(this).attr("src").replace("_out.", "_on."));
                        }
                    }
                },
                function(){
                    if($(window).width() > 960) {
                        if ($(this).attr("src") && !$(this).hasClass("current")) {
                            $(this).attr("src", $(this).attr("src").replace("_on.", "_out."));
                        }
                    }
                }
        );
    });

これで恐らく期待する操作になるかと思います。
ただし、

if($(window).width() > 960) {}

この部分を繰り返し書いているのであまり綺麗なコードではありません。
繰り返しを避けるには、$(window).resize()内で処理するのが良いかもしれません。

     $(function () {

        $(window).resize(function () {

            //画像のホバーイベントを解除
            //これを入力しないとリサイズの度にイベントが何個も登録されてしまう。
            $('img.resize-onout-img').off('mouseenter mouseleave');

            if($(this).width() > 960) {
                //960より画面が大きい場合の処理
                //画像のホバーイベント登録
                $('img.resize-onout-img').hover(function () {

                    if ($(this).attr("src")) {
                        $(this).attr("src", $(this).attr("src").replace("_out.", "_on."));
                    }

                }, function () {

                    if ($(this).attr("src") && !$(this).hasClass("current")) {
                        $(this).attr("src", $(this).attr("src").replace("_on.", "_out."));
                    }

                });
            }
        });

        //初回のイベント発火
        $(window).trigger('resize');

    });

/////////////// html
<img class="resize-onout-img" src="images2_out.jpg">

当方Javascriptは全くの素人です。とありますので、ここまでする必要はありませんが、後々意味がわかるかと思います。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。