jquery, 창 너비가 변경 될 때 클래스 추가/제거

Question

로드 할 때 또는 창 크기를 조정할 때 클래스를 추가/제거하는 아주 기본적인 스크립트를 작성했습니다.

더 나은 방법이 있는지 또는 코드 줄을 줄이는 것이 가능한지 궁금합니다.

기본적으로 사이트를 작은 화면에서 볼 때 스타일을 변경할 수 있기를 원합니다. 나는 그것이 특정 폭 아래에 갔을 때 html 태그에 새로운 클래스를 추가하는 것이 가장 좋을 것이라고 생각했다 ...

어쨌든 여기 내 코드가있다.

<script type="text/javascript"> 
$(document).ready(function() { 
    /* Check width on page load*/ 
    if ($(window).width() < 514) { 
    $('html').addClass('mobile'); 
    } 
    else {} 
}); 

$(window).resize(function() { 
    /*If browser resized, check width again */ 
    if ($(window).width() < 514) { 
    $('html').addClass('mobile'); 
    } 
    else {$('html').removeClass('mobile');} 
}); 

감사

질리안

Answer 1

function resize() { 
    if ($(window).width() < 514) { 
    $('html').addClass('mobile'); 
    } 
    else {$('html').removeClass('mobile');} 
} 

$(document).ready(function() { 
    $(window).resize(resize); 
    resize(); 
}); 

Answer 2

사용 미디어 클래스

, DRY 사용하여 코드를 (자신을 반복하지 마십시오) 모든

@media screen and (max-width: 900px) { 
    .class { 
    width:800px; 

    } 
} 

@media screen and (max-width: 500px) { 
     .class { 
     width:450px; 

    } 
} 

Answer 3

우선 함수 :

function checkWidth(init) 
{ 
    /*If browser resized, check width again */ 
    if ($(window).width() < 514) { 
     $('html').addClass('mobile'); 
    } 
    else { 
     if (!init) { 
      $('html').removeClass('mobile'); 
     } 
    } 
} 

$(document).ready(function() { 
    checkWidth(true); 

    $(window).resize(function() { 
     checkWidth(false); 
    }); 
}); 

Answer 4

글쎄, 나는 파티에 늦었다는 것을 알고 있지만, 실제로는 필요하지 않은 것을 $(document).ready()과 같이 보았다.

반복하여 호출하는 경우 선택자를 캐시하려고 시도하면 la var $window = $(window); 성능에 도움이됩니다. 캡슐화 할 함수 표현식을 사용하여 전역 범위를 벗어나지 만 캐시 된 jQuery 선택된 요소 인 $window 및 $html에 여전히 액세스 할 수 있습니다.

아마

http://jsfiddle.net/userdude/rzdGJ/1

(function($) { 
    var $window = $(window), 
     $html = $('html'); 

    $window.resize(function resize(){ 
     if ($window.width() < 514) { 
      return $html.addClass('mobile'); 
     } 

     $html.removeClass('mobile'); 
    }).trigger('resize'); 
})(jQuery); 

조금 청소기 쉽게 거의 다음과 같이하십시오

(function($) { 
    var $window = $(window), 
     $html = $('html'); 

    function resize() { 
     if ($window.width() < 514) { 
      return $html.addClass('mobile'); 
     } 

     $html.removeClass('mobile'); 
    } 

    $window 
     .resize(resize) 
     .trigger('resize'); 
})(jQuery); 

http://jsfiddle.net/userdude/rzdGJ/2

Answer 5

이 문제는 잠시 동안 나를 졸라 댔, 실제로. 대개 전환에 대해 여러 크기가 있습니다. 나는이 내가 공유하고자합니다 생각 썼다 :

$(function() { 
    var pageTransitions = [['full',1600],['mobile',800],['tiny',400],['micro',0]]; // number shows minimum size - must be from high to low 
    function resize() { 
    var target = 0, 
     w = $(window).width(), 
     h = $('html'); 
    $.each(pageTransitions, function(index, pageTransition) { 
     if(w > pageTransition[1]) { 
      target = index; 
      return false; 
     } 
    }); 
    $.each(pageTransitions, function(index, pageTransition) { 
     h.removeClass(pageTransition[0]); 
    }); 
    h.addClass(pageTransitions[target][0]); 
    } 
    resize(); 
    jQuery(window).on('resize', function() { 
    resize(); 
    }); 
}); 

http://jsfiddle.net/mckinleymedia/ERZ3q/7/

Answer 6

또한 내가 생각하는이 방법을 사용할 수 있습니다 그에 따라 매우 분명 다음의

$(window).on('resize', function(){ 
     var win = $(this); 
     if (win.width() < 514) { 

     $('html').addClass('mobile'); 

     } 
    else 
    { 
     $('html').removeClass('mobile'); 
    } 

}); 

Simple Method