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

你已经可以看到你的代码开始变得更清洁......这应该会给你一个重新分解的好开始。

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

1 个答案: