Jqueryのresizeを使って windowの大きさによって表示させる画像を変更させる

Question

function show_hoverImage() {

    var w = $(window).width();
    if(w > 1100) {

         $("body").on("mouseenter mouseleave", ".itemWraper", function(ev) {
            if(ev.type === "mouseenter") {
                $(".preH", this).css({"visibility": "hidden"});
                $(".itemcHover", this).css({"visibility": "visible"});
            }else{
                $(".preH", this).css({"visibility": "visible"});
                $(".itemcHover", this).css({"visibility": "hidden"});
            }
        });
        $("body").on("mouseenter mouseleave", ".socialMarkF", function(ev) {
            if(ev.type === "mouseenter") {
                $(".snsN", this).css({"display": "none"});
                $(".snsH", this).css({"display": "block"});
            }else{
                $(".snsN", this).css({"display": "block"});
                $(".snsH", this).css({"display": "none"});
            }
        });

        $("body").on("mouseenter mouseleave", ".socialMarkT", function(ev) {
            if(ev.type === "mouseenter") {
                $(".snsN", this).css({"display": "none"});
                $(".snsH", this).css({"display": "block"});
            }else{
                $(".snsN", this).css({"display": "block"});
                $(".snsH", this).css({"display": "none"});
            }
        });
      }else if(w < 1100){
        $(".itemcHover", this).css({"display": "none"});
      }
  }


  $(window).resize(function() {
      show_hoverImage();
  }).trigger("resize");

上記のコードでは、ロード時はwidth 1100以下だとmouseenterした時には画像は表示されません。
しかし、一度windowサイズを1100以上にすると、windowサイズを1100以下にしても,
mouseenterした時に画像が表示されてしまいます。windowをリサイズするごとに画像の表示を変更させるにはどうすればいいですか？

教えて頂けたら幸いです。よろしくお願いします。

Answer 1

シンプルにやるなら、たとえば画像 (サムネイル＋マウスで拡大画像みたいな感じでしょうか？) の組を要素で囲って、 CSS の :hover 擬似クラスの内部で元画像の非表示と拡大画像の表示のスタイルを書くとかいかがでしょう。まずは簡単な、ウィンドウサイズ無視のサンプルですが。

.image-wrapper .thumbnail {
  display: block; /*普段は表示*/
}
.image-wrapper:hover .thumbnail {
  display: none; /*マウスオンで非表示*/
}
.image-wrapper .popup {
  display: none; /*普段は非表示*/
}
.image-wrapper:hover .popup {
  display: block; /*マウスオンで非表示*/
}

<div class="image-wrapper">
  <img class="thumbnail" src="...">
  <img class="popup" src="...">
</div>

ここまでなら JavaScript いりませんね。
さて、ウィンドウサイズで違う画像にする部分はさすがに CSS だけでは難しそうなので、 JS の出番です。
たとえばresizeイベントで、bodyタグ (か何か) に対してウィンドウサイズに応じたクラスsmall``medium``largeをつけます。この JS は超簡単だと思うので割愛します。.removeClass("small medium large")で全部消せます。.addClass("どれか")で追加してください。
上記コードはこのように変化します。

.image-wrapper>.thumbnail {
  display: block; /*普段は表示*/
}
body.medium .image-wrapper:hover>.thumbnail /*small 以外の場合だけ変化*/
body.large .image-wrapper:hover>.thumbnail {
  display: none; /*マウスオンで非表示*/
}
.image-wrapper>.medium-popup, /*全部非表示にします。*/
.image-wrapper>.large-popup, { /*small は要素自体なし*/
  display: none; /*普段は非表示*/
}

body.medium .image-wrapper:hover>.medium-popup {
  display: block; /*マウスオンで非表示*/
}
body.large .image-wrapper:hover>.large-popup {
  display: block; /*マウスオンで非表示*/
}

<div class="image-wrapper">
  <img class="thumbnail" src="...">
  <img class="medium-popup" src="...">
  <img class="large-popup" src="...">
</div>

まったくテストしてないのでコピペで動くかわからないですが、やり方のヒントになれば。

Comments

[退会済みユーザー]

ご回答ありがとうございます。
このやり方は全く思い浮かばなかったです。

Answer 2

.off()を利用すればいいのではないでしょうか。