0

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

基本上，我根据使用 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();
        }
      }
  });

});

4

1 回答 1

0

首先，这些函数做同样的事情：

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

您已经可以看到您的代码开始变得更清晰......这应该为您重构重构提供了一个良好的开端。

于 2013-05-17T15:25:14.587 回答