$（ウィンドウ）.width（）500pxなどの上と500pxなど

Question

私のコードの下にサイズのために完璧に動作することができませんが、次のとおりです。

if ($(window).width() > 500) { 
    $("#about-us .q-team .q-team-layout .q-jyoti-layout").hover(function() { 
     $("#about-us .q-team .q-team-layout .q-jyoti-layout .q-jyoti-info").css("display", "block"); 

    }, function() { 
     $("#about-us .q-team .q-team-layout .q-jyoti-layout .q-jyoti-info").css("display", "none"); 

    }); 
}else if ($(window).width() <= 500) { 
    $("#about-us .q-team .q-team-layout .q-jyoti-layout").hover(function() { 
     $("#about-us .q-team .q-team-layout .q-xzz").css("display", "block"); 

    }, function() { 
     $("#about-us .q-team .q-team-layout .q-xzz").css("display", "none"); 

    }); 
} 

下図のように私のHTMLコードは次のとおりです。

<div class="q-team-layout"> 
       <div class="q-jyoti-layout"> 
        <img class="q-team-images" src="../test/images/jyoti.png" alt="Los Angeles"> 
        <div class="q-name">Jyotirmoy</div> 
        <div class="q-desig">CEO</div> 
        <div class="x1"> 
         <span style="color:#ff363f;font-weight:bold;"> Jyoti </span> 
         <span style="color:#4d4d4d;"> CEO </span> 
        </div> 
        <div class="q-jyoti-info">Lives in Gurgaon. <br/>Has spent 6 years in various multinational companies executing and ideating for new age projects.</div> 
       </div> 
       <div class="q-xzz">Lives in Gurgaon. <br/>Has spent 6 years in various multinational companies executing and ideating for new age projects.</div> 
</div> 

があってはならないと500pxなど .Q-ジョティ・情報の下にがあってはならない.Q-xzz 500pxなどの上

だから基本的に私がここで何をしたいです。しかし、どういうわけかこの条件は、モバイルとウェブの両方で完全には機能していません。この条件文には何かがありますか？

Answer 1

$("#about-us .q-team .q-team-layout .q-jyoti-layout").hover(function() { 
    var childSelector = $(window).width() > 500 ? '.q-jyoti-info' : '.q-xzz'; 
    $(this).find(childSelector).toggle();//does same as hide/show 
}); 

を簡素化するためにhover()内の条件を入れて、すべての場所のあなただけhover()に1つの関数の引数を提供するとき、それは両方のイベントのために呼び出されることに注意

Answer 2

まず、このCSSファイルでので、htmlとcssがブラウザで解析されると、要素のデフォルト値は隠されます

＃about-us .q-team。レイアウト.q-jyoti-layout .q -jyoti-info {
表示：（あなたはjQueryの方法」addClassを使用することができ、その後ブロック
}

：なし
}

は、次にCSSで

.SHOW {
表示をクラスを追加します） 'と' removeClass（） '

if ($(window).width() > 500) {  
      $("#about-us .q-team .q-team-layout .q-jyoti-layout").hover(function() { 
       $("#about-us .q-team .q-team-layout .q-jyoti-layout .q-jyoti-info").addClass('show'); 

      }, function() { 
       $("#about-us .q-team .q-team-layout .q-jyoti-layout .q-jyoti-info").removeClass('show'); 

      }); 
    } 

    else { 
      $("#about-us .q-team .q-team-layout .q-jyoti-layout").hover(function() { 
       $("#about-us .q-team .q-team-layout .q-xzz").addClass('show'); 

      }, function() { 
       $("#about-us .q-team .q-team-layout .q-xzz").removeClass('show'); 

      }); 
     } 

Answer 3

正確に500ピクセル幅でjQueryをトリガしないことを指している場合は、$(window).width()はブラウザのスクロールバーを考慮していないためです。異なるブラウザには異なるスクロールバーの幅があるため、これを補う方法はありません。ただし、matchMediaを使用すると、jQueryでメディアクエリを使用できます。ただし、IE9以下ではmatchMediaはサポートされていません。

if(window.matchMedia('(min-width: 500px)').matches) { 
    $("#about-us .q-team .q-team-layout .q-jyoti-layout").hover(function() { 
    $("#about-us .q-team .q-team-layout .q-jyoti-layout .q-jyoti-info").addClass('show'); 
    }, function() { 
    $("#about-us .q-team .q-team-layout .q-jyoti-layout .q-jyoti-info").removeClass('show'); 
    }); 
} else { 
    $("#about-us .q-team .q-team-layout .q-jyoti-layout").hover(function() { 
    $("#about-us .q-team .q-team-layout .q-xzz").css("display", "block"); 
    }, function() { 
    $("#about-us .q-team .q-team-layout .q-xzz").css("display", "none"); 
    }); 
}