Ищете более эффективный способ написания базового сценария if else jQuery

Question

Я чувствую, что мой скрипт действительно избыточен и может быть написан более эффективно. Если у кого-то есть лучший способ сделать это, пожалуйста, поделитесь.

В основном я показываю и скрываю div в зависимости от того, какой переключатель выбран, используя инструкции if else.

Вот 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(); 
     } 
     } 
    }); 

});

Answer 1

для начала, эти функции делают одно и то же:

$(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(); 
     } 
     } 
    }); 

Уже вы можете увидеть, что ваш код начинает получать очиститель ... это должно дать вам хороший старт для рефакторинга.