試圖重構JQuery的最佳做法，但在聲明變量時失敗

基於類似的案例研究，我創建了以下位腳本來在單擊'註冊'圖像時顯示/隱藏註冊表單（使用'X'出現，作爲一個關閉按鈕，當窗體顯示：試圖重構JQuery的最佳做法，但在聲明變量時失敗

(function($) { 

    var container = $('#sidecontent'); 

    $('#signup').on('click', function() { 

     container.slideToggle(500); 

     if (container.find('span.close').length) return; 

     $('<span class=close>X</span>') 
      .prependTo(container) 
      .on('click', function() { 
       container.slideToggle(500) 
      }) 
    }); 

})(jQuery);

這似乎工作正常我的問題是，我認爲它可能是不寫它的最好方式......但一旦我嘗試整理該代碼即即使var Mytoggle = $(container.slideToggle(500))，我記得事情要麼失敗或表格自動出現。

我是一個Jquery的新手（似乎遇到麻煩搞清楚了定義變量和對象文字）。希望能夠對重組上述問題的最佳方式提供任何意見。謝謝。

來源

2012-04-01 fivedoor

這將工作：

(function($) { 
    var container = $('#sidecontent'), 
     Mytoggle = function() { 
      container.slideToggle(500); 
     } 


    $('#signup').on('click', function() { 
     Mytoggle(); 
     if (container.find('span.close').length) return; 

     $('<span class=close>X</span>') 
      .prependTo(container) 
      .on('click', function() { 
       Mytoggle(); 
      }) 
    }); 
})(jQuery);

功能Mytoggle是上單擊處理程序之外定義。

上面的代碼可以進一步改進：

(function($) { 
    var container = $('#sidecontent'), 
     Mytoggle = function() { 
      container.slideToggle(500); 
     } 

    // You can define this click handler here, even if span.close doesn't exist yet 
    container.on('click', 'span.close', Mytoggle); 


    $('#signup').on('click', function() { 
     Mytoggle(); 

     if (container.find('span.close').length === 0) { 
      $('<span class="close">X</span>') 
      .prependTo(container); 
     } 


    }); 
})(jQuery);

來源

2012-04-01 21:17:18

@Pointy，@ TJ。非常感謝您對Pointy和TJ的支持！這一切都很好。我沒有意識到我需要在Mytoggle之後添加圓括號，因爲它已經被定義爲一個函數。我確定我一直在看例子是一個類似的變量被稱爲沒有他們，但現在我繞路由我找不到一個例子...我想我有一些重讀要做的東西來理解事情無論如何再次感謝！ – fivedoor 2012-04-01 23:23:48

大概應該是

var myToggle = $(container).slideToggle(500);

編輯 —等待;你希望這是一個功能，對嗎？

function myToggle() { 
    container.slideToggle(500); 
}

然後，你可以調用，或者通過它來設置單擊處理：

// ... 
    .on('click', myToggle);

編輯再次 —既然你初始化「集裝箱」是一個jQuery變量，沒有理由重新包裝它，所以你可以直接使用「容器」來製作jQuery調用。

有時人們使用帶有「$」變量名在開始作爲一個提醒：

var $container = $('#sidecontent');

這是個人喜好的問題。

來源

2012-04-01 21:15:30 Pointy

試圖重構JQuery的最佳做法，但在聲明變量時失敗

回答

相關問題