Javascript keydown 토글

Question

JS 함수를 사용하여 머리를 새길 때 꽤 새로 왔습니다. 이전에 사용했던 모든 것을 그대로 사용하는 경향이 있었지만 특정 키 누르기에서 Div를 토글 (높이 : &) 시키려면 함수를 결합하고 수정하려고했습니다. 나는 첫 번째 부분 ('ctrl + o'콤보에 표시 할 div를 얻을 수 있음)을 가지고 있지만 현재 표시 상태를 기반으로 표시하거나 숨길 if 문과 결합 할 수 없습니다.

현재 작업은 JS '만 보여'

$(document).keydown(function (e) { 
    if (e.keyCode == 79 && e.ctrlKey) { 
     document.getElementById('thediv').style.height = 'auto'; 
     document.getElementById('thediv').style.opacity = '1'; 
     return false; 
    } 
}); 

내가이 도처에 변화 시도했습니다 (JS '온/오프 전환'의 작동하지

, 이것은 무엇의 아이디어를 제공하기 위해 더 I 달성하기 위해 노력하고 있습니다.) :

$(document).keydown(function (e) { 
    if (e.keyCode == 76 && e.ctrlKey) { 

     function toggler('thediv') { 
      var myDiv = document.getElementById('thediv').style.height; 
      if (myDiv == "auto") { 
       document.getElementById('thediv').style.height = "0px"; 
       document.getElementById('thediv').style.opacity = "0"; 

      } else { 
       document.getElementById('thediv').style.height = "auto"; 
       document.getElementById('thediv').style.height = "1"; 
      } 
     } 

    } 
}); 

어떤 도움을 주시면 감사하겠습니다.

Answer 1

요소를 표시하거나 숨기고 싶을 때 높이와 가시성을 설정해야하는 이유는 무엇입니까? 그냥 toggle으로 표시하거나 숨 깁니다.

$(document).keydown(function (e) { 
    if (e.keyCode == 76 && e.ctrlKey) { 
     $("#thediv").toggle(); 
    } 
}); 

코드를 보면

$(document).keydown(function (e) { 
    if (e.keyCode == 76 && e.ctrlKey) { 

     //This funciton is never called, you define it, do not call it! 
     function toggler('thediv') { //<-- Error Here, you have a string as an argument? 
      var myDiv = document.getElementById('thediv').style.height; 
      if (myDiv == "auto") { 
       document.getElementById('thediv').style.height = "0px"; //<--Bad practice using document.getElementById('thediv') over and over. Store it into a variable and reference it. 
       document.getElementById('thediv').style.opacity = "0"; 

      } else { 
       document.getElementById('thediv').style.height = "auto"; 
       document.getElementById('thediv').style.height = "1"; 
      } 
     } 

    } 
});