寻找一种更有效的方法来编写一些基本的if-else jQuery脚本

我觉得我的脚本真的是多余的，可以更有效地编写。如果有人有更好的方法，请分享

基本上，我是根据使用if-else语句选择的单选按钮来显示和隐藏一个div

这是JQuery

//SUMMARY REVIEW DROPDOWN MODULES(FILTER-DROPDOWN)
$(function () {
   //Values of checked radio buttons
  var cd_empty = $('input[id=m4]');
  var adr_empty = $('input[id=m2]');
  var ocpy_empty = $('input[id=m1]');
  var revpar_empty = $('input[id=m3]');
  var cd_checked = $('input[id=m4]:checked', '.ddm-inputs').val();
  var adr_checked = $('input[id=m2]:checked', '.ddm-inputs').val();
  var ocpy_checked = $('input[id=m1]:checked', '.ddm-inputs').val();
  var revpar_checked = $('input[id=m3]:checked', '.ddm-inputs').val();
  var module2 = $('.dd-module-2');

   if(cd_checked === 'on') {
    module2.fadeIn();
   }
  // else {
  //   module2.fadeOut();
  // }

  $(cd_empty).click(
    function(e){
      if ($(this).is(':checked')){
        if(module2.css('display') === 'block') {
          // module2.slideUp();
          // alert('its already open');
          preventDefault(e);
        }
        else {
          module2.slideToggle();
        }
      }

  }); 

  $(adr_empty).click(
    function(e){
      if ($(this).is(':checked')){
        if(module2.css('display') === 'block') {
          // module2.slideUp();
          // alert('its open');
          module2.slideToggle();
        }
        else {
          // alert('its not open');
          module2.hide();
        }
      }
  }); 

  $(revpar_empty).click(
    function(e){
      if ($(this).is(':checked')){
        if(module2.css('display') === 'block') {
          // module2.slideUp();
          // alert('its open');
          module2.slideToggle();
        }
        else {
          // alert('its not open');
          module2.hide();
        }
      }
  }); 

  $(ocpy_empty).click(
    function(e){
      if ($(this).is(':checked')){
        if(module2.css('display') === 'block') {
          // module2.slideUp();
          // alert('its open');
          module2.slideToggle();
        }
        else {
          // alert('its not open');
          module2.hide();
        }
      }
  }); 

---

}))

首先，这些函数的作用完全相同：

$(adr_empty).click(
    function(e){
      if ($(this).is(':checked')){
        if(module2.css('display') === 'block') {
          // module2.slideUp();
          // alert('its open');
          module2.slideToggle();
        }
        else {
          // alert('its not open');
          module2.hide();
        }
      }
  }); 

  $(revpar_empty).click(
    function(e){
      if ($(this).is(':checked')){
        if(module2.css('display') === 'block') {
          // module2.slideUp();
          // alert('its open');
          module2.slideToggle();
        }
        else {
          // alert('its not open');
          module2.hide();
        }
      }
  }); 

  $(ocpy_empty).click(
    function(e){
      if ($(this).is(':checked')){
        if(module2.css('display') === 'block') {
          // module2.slideUp();
          // alert('its open');
          module2.slideToggle();
        }
        else {
          // alert('its not open');
          module2.hide();
        }
      }
  });

您可以将它们更改为相同的函数，也可以取出var选择器。因此，替换为：

$('input#m1, input#m2, input#m3').click(
    function(e){
      if ($(this).is(':checked')){
        if(module2.css('display') === 'block') {
          // module2.slideUp();
          // alert('its open');
          module2.slideToggle();
        }
        else {
          // alert('its not open');
          module2.hide();
        }
      }
  }); 

---

您已经可以看到您的代码开始变得更干净。。。这将为重新分解提供一个良好的开端。

我意识到我不需要所有变量。当您分配变量时，它们已经是jQuery对象，您不需要用jQuery重新包装它们。此外，显示HTML；jQuery本身或多或少是无用的，因为我们无法猜测“更好”的技术。为什么属性等于选择器而不是id选择器？既然有多个类，为什么不使用它们呢？要添加到这一点，您还可以使用

以选择器开始
$（'input[id^=“m”]”）
缩短代码事件：）不幸的是，这在这种情况下不起作用，因为有一个“m4”不遵循相同的模式。好主意，不过：）