jQuery轉換代碼不會工作

Question

嗨，我試圖將JavaScript代碼轉換爲jQuery以獲得更好的性能。

這裏是我的JS代碼：

(function() { 

    var body_container = document.body, 
     content = document.querySelector('.content-wrap'), 
     open_menu = document.getElementById('open-button'), 
     close_menu = document.getElementById('close-button'), 
     checkifOpen = false; 

    function init() { 
     initialize_process(); 
    } 

    function initialize_process() { 
     open_menu.addEventListener('click', toggleMenu); 
     if(close_menu) { 
      close_menu.addEventListener('click', toggleMenu); 
     } 

     // close the menu element if the target it´s not the menu element or one of its descendants.. 
     content.addEventListener('click', function(ev) { 
      var target = ev.target; 
      if(checkifOpen && target !== open_menu) { 
       toggleMenu(); 
      } 
     }); 
    } 

現在，這裏是該JavaScript的我轉換的jQuery版本：

(function() { 

    var body_container = $('body'), 
     content = $('.content-wrap'), 
     open_menu = $('.open-button'), 
     close_menu = $('.close-button'), 
     checkifOpen = false; 

    function init() { 
     initialize_process(); 
    } 


    function initialize_process() { 
     open_menu.bind('click', toggleMenu); 
     if(close_menu) { 
      close_menu.bind('click', toggleMenu); 
     } 

     // close the menu element if the target it´s not the menu element or one of its descendants.. 
     content.bind('click', function(ev) { 
      var target = ev.target; 
      if(checkifOpen && target !== open_menu) { 
       toggleMenu(); 
      } 
     }); 
    } 

出於某種原因，這個代碼將無法正常工作。只是想知道我哪裏錯了。尤其是我將元素綁定到的部分替換爲JavaScript的addEventListener函數。

任何幫助，將不勝感激。

Answer 1

您沒有使用正確的選擇器。原來的代碼有這樣的：

document.getElementById('open-button') 

它與id「開放式按鈕」標識的元素。新的代碼具有這樣的：

open_menu = $('.open-button') 

其與class「開放式按鈕」標識的元件（或一組元件的）。要使用id你需要使用一個#：

open_menu = $('#open-button') 

有可能會有更多的問題，但這個問題沒有別的預期將工作開始......