조건이 충족되면 크기 변경시 jQuery 함수를 실행하십시오.

Question

내 로고 위로 마우스를 가져 가면 메시지가 표시되는 스크립트를 실행하려고합니다. 난 단지 768e.g보다 큰 화면 크기에서 작동하기를 바랄 뿐이다. div가 표시되고 목록에서 임의의 메시지가 표시됩니다.

크기가 변경되면 내 콘텐츠 컨테이너가 692보다 크거나 같은지 확인한 다음 본문에 hoverInfo 클래스를 추가합니다. 이 클래스가 존재하는 경우에만 스크립트를 실행하려고하지만 스크립트는 여전히 관계없이 실행됩니다.

현재 doc.ready에서 스크립트를 실행하지만 스크립트를 실행하여 창 크기와 doc.ready의 너비를 확인하십시오.

도움이 될 것입니다.

$(function(){ 
    function checkWidth() { 
     if ($('#content-wrap').width() == 692) { 
      $('body').addClass('hoverinfo');   
     } else { 
      $('body').removeClass('hoverinfo'); 
     } 
    } 
    checkWidth(); 

    $(window).resize(function() { 
     setTimeout(checkWidth, 200); 
    }); 

    function showText(){ 
     $randomText = $(".page #messages"); 
     $(".hoverinfo #logo").hover(
      function() { 
       $randomText.show(); 
      }, 

      function() { 
       $randomText.hide(); 
      } 
     );    
    }  
    showText();     
}); 

Answer 1

호버가 jquery의 라이브 이벤트로 작동하지 않는다고 생각합니다. 그래서 스스로를 설정하고 페이지로드의 나머지 기간 동안 머무를 것입니다.

시도;

 $(".no-touch .page.hoverinfo #logo").on("mouseenter", function(){ 
      $randomText.show(); 
      var aux=hoverText($text); 
      $(".page #messages li:eq("+aux+")").show(); 
      $("#logo").css('opacity','1'); 
     }); 

     $(".no-touch .page.hoverinfo #logo").on("mouseleave", function(){ 
      $randomText.hide(); 
      $text.hide(); 
      $("#logo").css('opacity','1'); 
     }); 

또한 나는 오타가 있다고 생각합니다.

if ($('#content-wrap').width() == 692) { 

if ($('#content-wrap').width() >= 692) { 

Answer 2

제 제안은 메시지를 볼 수있는 화면 크기를 지정하는 것입니다. 어쩌면 스타일 시트에서 다음

<div class="showOnLrg"> 
<h3 id="randomText" style="display:none;"></h3> 
</div> 

는 미디어 쿼리

.showOnLrg{display:none;} 
@media screen and(min-width : 768px){ 
.showOnLrg{display:block;} 
} 

숨기고 호버 기능에 jQuery를 사용하여 텍스트를 표시 할 수 있습니다 그 방법과 규칙을 가지고과 같이 사업부의 내부에 텍스트 내용을 포장 크기 조정 기능에서 화면 해상도를 확인하지 않고도 실제로 크기 조정 기능이 필요하지 않습니다. 예, 마우스 오버 기능이 작동하지만 텍스트의 부모 컨테이너가 숨겨져 있으면 텍스트를 전환 할 때 텍스트가 표시되지 않습니다. 그래서 호버 기능을 그렇게 선언 할 수 있습니다.

$(".hoverinfo #logo").hover(
      function() { 
       $randomText.show(); 
      }, 

      function() { 
       $randomText.hide(); 
      }); 

크기 조정 기능 내에서 설정하는 경우 div 크기가 아닌 창 크기를 확인해야합니까?

당신이 .ready $부터 $ (문서)를 필요로하지 않는 모든

$(window).width();