width에 따라 함수 적용 시킬때 이게 맞나요...?

Question

안녕하세요 선배님들 코딩하다가 코린이가 궁금해서 여쭤봅니다.클론 코딩을 하고 있는데, 미디워 쿼리는 화면길이에 따라 css적용을 할수있는데 똑같이 스크립트에서도 함수를 브라우저 width 마다 다르게 적용을 하고싶습니다. 구글링 하면서 아래와 같은 코드를 찾았는데 적용이 안되서 ㅠㅠ 뭔가 오류가 있는건지 아니면 다른 방법이 있는지 궁금합니다 //미디어쿼리같이 js 화면 길이에 따라 제어하기 근데 잘 안됨 3 function responsive() { //현재 창의 넓이 var w &#61; $(window).width(); if(w > 999){ //길이가 999px 보다 크면 적용해라 //적용할 함수 } } $(function (){ //브라우저가 열린 직후 responsive(); $(window).resize(function(){ //창크기가 변경될 경우 responsive함수 실행 responsive(); }); });

LostStarz · Accepted Answer

위 코드로 저는 잘 동작 합니다. 적용이 안된다는 것이에러가 나는거라면 에러화면을 찍어주시고예상한것과 다르게 동작하는 거라면 자세히 적어주심이...

체리맛콜라 · Answer

그렇군요... 제가 뭔가 스크립트 안에서 꼬였나 봅니다. .정상작동 되는 코드니까 한번 다시 꼼꼼히 해보겠습니다 !! 확인해 주셔서 감사합니다!

LostStarz · Answer

혹시 jquery 라이브러리는 넣으신건가요?해당 코드에서 jquery를 사용하는데.. html에서 head 영역이던 body 영역이던 어딘가에 저 스크립트 태그를 넣어주셔야해요해당 코드보다 먼저 jquery를 불러오도록 head에 넣어보세요

체리맛콜라 · Answer

넵 ! 제이쿼리는 헤드에 넣어 놨구 함수 스크립트는 바디 맨밑에다가 위치 시켰시켰습니다! 문제는 함수자체는 저 if문 밖에 있으면 잘 작동이 되는데 아래 사진같이 삽입했는데 if문안에 함수를 넣으면 작동이 안됩니다....그래서 width 0~999px 함수랑 width 1000이상일때 함수랑 마크업을 추가로 해서 진행을 하고 있긴합니다 ㅠㅠ 근데 너무 비효율 적이라서 저걸 꼭 쓰고싶은데 뭐가 문제인지 모르겠어요... ㅠㅠ function responsive() { //현재 창의 넓이 var w &#61; $(window).width(); if(w < 999){ //길이가 999px 보다 작다면 적용 //모바일 함수 // 검색 왼쪽에서 오른쪽으로 열리고 닫히는 기능 function openSerch() { document.getElementById(&#34;open_serch&#34;).style.display &#61;&#34;none&#34;; document.getElementById(&#34;close_serch&#34;).style.display &#61;&#34;block&#34;; document.getElementById(&#34;open_serch_menu_&#34;).style.left &#61;&#34;0%&#34;; } function closeSerch() { document.getElementById(&#34;open_serch&#34;).style.display &#61;&#34;block&#34;; document.getElementById(&#34;close_serch&#34;).style.display &#61;&#34;none&#34;; document.getElementById(&#34;open_serch_menu_&#34;).style.left &#61;&#34;-100%&#34;; } } } $(function (){ //브라우저가 열린 직후 responsive(); $(window).resize(function(){ //창크기가 변경될 경우 responsive함수 실행 responsive(); }); }); 그리고 개발자 모드 콘솔에서 보니까 이에러가 뜨는데.. 그대로 구글링해봐도 정의가 안됬다는데.. 흠 어떤 부분이 에러인지 모르겠습니다! ㅠ

width에 따라 함수 적용 시킬때 이게 맞나요...?

4개의 답변

Q&A 목록