트리거 jQuery 'if statement'on resize

화면 너비에 따라 실행하고 싶은 jQuery 코드가 있습니다. 이 페이지로드 및 브라우저 창의 크기 조정 트리거 할 싶습니다. 현재는 페이지로드에서만로드됩니다.트리거 jQuery 'if statement'on resize

$(function(){ 
    if ($(window).width() < 720) { 
    $(".mobile").click(function(){ 
     $("#mobile").toggle(); 
    }); 
    } else { 
    $(".desktop").click(function(){ 
     $("#desktop").toggle(); 
    }); 
    } 
});

예. 사용자가 데스크톱 크기로로드하고 크기를 줄이면 사용자가 페이지를 새로 고침하지 않으면 모바일 클릭이 실행되지 않습니다.

저는 주위를 둘러 보았고 jQuery 크기 조정 이벤트를 사용해야한다는 점을 이해했지만 제대로 작동하지 않습니다.

도움을 주시면 감사하겠습니다. 여기에 코드가 있습니다 ... http://codepen.io/anon/pen/WbxKrv

출처

2014-12-19 Adam

봐. – SLaks

↑↑↑ https://developer.mozilla.org/en-US/docs/Web/API/window.matchMedia –

물론 틀린 것이 아니라면 이것은 여전히 크기 변경시 트리거되지 않습니다. 여기에 내 예가있다. http://codepen.io/anon/pen/RNRBGv – Adam

-http://codepen.io/anon/pen/azmvWE

JQuery와 함수는 현재 페이지로드뿐만 아니라 크기 조정에 트리거 ...은`matchMedia`에서

function checksize() { 
    if ($(window).width() < 720) { 
    $(".mobile").click(function(){ 
     $("#mobile").toggle(); 
    }); 
    } else { 
    $(".desktop").click(function(){ 
     $("#desktop").toggle(); 
    }); 
    } 
} 

checksize(); 

$(window).resize(checksize);

출처

2014-12-23 10:05:23 Adam

아래에서 귀하의 의견을 바탕으로 사용자 클릭으로 전환하지 않을 것입니다.

@media screen and (max-width: 720px) { 
    selector-for-your-big-screen-only-content { 
     display: none; 
    } 
} 
@media screen and (min-width: 721px) { 
    selector-for-your-small-screen-only-content { 
     display: none; 
    } 
}

더 : http://www.w3.org/TR/css3-mediaqueries/ (. 코드 예제에서 click 핸들러는 다음으로 의미가 무엇인지 확실하지 않음)

이 처리하는 가장 좋은 방법은 CSS가 아닌 자바 스크립트를 사용하여 미디어 선택기 함께

원래 대답 :

나는 당신의 목표는 쇼하는 것입니다 받아 모바일 사이트 또는 데스크톱 사이트가 자동으로 또는 사용자가 버튼을 클릭 할 때.

기본적으로, 당신은 기능에 논리를 넣어 재사용 : 당신은 this을 사용할 수 있습니다

$(function(){ 

    // Auto select on load and resize 
    autoSelect(); 
    $(window).on("resize.autoselect", autoSelect); 

    // If user makes an explicit choice, switch to their choice and don't 
    // auto-select anymore 
    $(".mobile").click(function() { 
    showMobile(true); 
    $(window).off("resize.autoselect"); 
    }); 
    $(".desktop").click(function() { 
    showMobile(false); 
    $(window).off("resize.autoselect"); 
    }); 

    function autoSelect() { 
    if ($(window).width() < 720) { 
     showMobile(true); 
    } else { 
     showMobile(false); 
    } 
    } 

    function showMobile(flag) { 
    $("#mobile").toggle(flag); 
    $("#desktop").toggle(!flag); 
    } 
});

출처

2014-12-19 16:53:41

아니요. 데스크톱과 모바일 용 모바일을 모바일에서만 표시하고 싶습니다. 원래 코드에서와 같이 잘 작동하지만, 창 크기를 조정할 때 모바일보기에서 페이지를 새로 고치는 대신 모바일 버튼을 자동으로 활성화하면됩니다. – Adam

@ Adam : 그런 다음 위의 '클릭'처리기를 제거하십시오. (사용자가 할 수 없으면 무엇을 했습니까?) 근본적인 요점은 함수에 결정을 내리는 논리를 넣고 그 함수를 load에 호출 한 다음 resize에서 다시 호출한다는 것입니다. –

자바 스크립트를 사용하는 간단한 테스트 사례를 보여줄 수있는 클릭 핸들러가 없습니다. 좋아요. 시도하고 다시 말해 보도록하겠습니다. 데스크톱보기 (720px보다 큰 너비)라고 가정 해 봅시다. 바탕 화면 단추를 클릭하면 바탕 화면 텍스트가 표시됩니다. 이것은 완벽합니다. 모바일 버튼을 클릭하면 아무 일도 일어나지 않습니다. 괜찮습니다. 이제 창 크기를 720px 이하로 조정하면 모바일 버튼을 클릭하고 창을 새로 고치지 않고 모바일 텍스트를 표시 할 수 있기를 원합니다. 이게 말이 돼? – Adam

-1

. body 태그에 onresize 속성을 추가하고 로직이 작성된 함수를 호출해야합니다. 이것은 내가 달성하기 위해 노력했다입니다

<body onresize="myFunction()">

출처

2014-12-19 17:00:53

트리거 jQuery 'if statement'on resize

답변

관련 문제