jquery单击（函数）onload

我需要帮助来合并/缩小下面的代码。最初我有一个下拉列表，它根据值控制div的可见性。它可以在onClick上运行，但由于它是一个数据库页面，所以在加载时不起作用，所以我不得不添加第二个逻辑。非常感谢您的任何建议/意见

$(document).ready(function () {
  var $caseStatus = $(this).find("#auth_status").val();
  //alert ($caseStatus);
  if ($caseStatus === "1") {
    $(".pendingClass").show();
    $(".authClass").hide();
  }
  else if ($caseStatus === "2") {
    $(".pendingClass").hide();
    $(".authClass").show();
  }
  else {
    $(".pendingClass").hide();
    $(".authClass").hide();
  }

  // Show/Hide Divs for Authorization Status
  $("#auth_status").click(function () {
    if ($(this).val() === "0") {
      $(".pendingClass").hide();
      $(".authClass").hide();
    }
    else if ($(this).val() === "1") {
      $(".pendingClass").show();
      $(".authClass").hide();
    }
    else if ($(this).val() === "2") {
      $(".pendingClass").hide();
      $(".authClass").show();
    }
  });
});

---

通过简化

if

/

else

结构，您可以稍微减少代码（因为除了

“1”

之外的任何内容都是相同的显示/隐藏结果，并且在页面首次加载时只需调用您绑定的处理程序，如下所示：

$(function () {
  $("#auth_status").click(function () {
    var val = $(this).val();
    $(".pendingClass").toggle(val === "1");
    $(".authClass").toggle(val === "2");
  }).click();
});

---

通过简化

if

/

else

结构，您可以稍微减少代码（因为除了

“1”

之外的任何内容都是相同的显示/隐藏结果，并且在页面首次加载时只需调用您绑定的处理程序，如下所示：

$(function () {
  $("#auth_status").click(function () {
    var val = $(this).val();
    $(".pendingClass").toggle(val === "1");
    $(".authClass").toggle(val === "2");
  }).click();
});

---

您可以定义两个对象：

var authCtrl = {
  '0': { show: null, hide: '.pendingClass, .authClass' },
  '1': { show: '.pendingClass', hide: '.authClass' },
  '2': { show: '.authClass', hide: '.pendingClass' }
};

---

类似地，对于另一种情况（向后）。然后处理程序仅根据该字段值获取条目，并按照指示隐藏/显示。

您可以定义两个对象：

var authCtrl = {
  '0': { show: null, hide: '.pendingClass, .authClass' },
  '1': { show: '.pendingClass', hide: '.authClass' },
  '2': { show: '.authClass', hide: '.pendingClass' }
};

---

---

类似地（向后）处理另一个案例。然后处理程序仅根据该字段值获取条目，并按照指示隐藏/显示。

+1这比我的版本更优雅。但是

$caseStatus

实际上应命名为

caseStatus

，；-）和

$（this）.val（）==“1”

假设太简单了，因为有三种情况。@Tomalak-更好？：）我不确定

1

对状态的解释是什么，但为了尽可能清楚，它应该被命名为状态。@Tomalak-Woops，我读到

0

和

2

是一样的，你是对的，那些显示/隐藏是不同的，更新了更正。@Nick Craver:就是这样。将其表示为单击（函数…）的想法对我来说太晚了一点，现在我不想改变我的答案以避免看起来像一只复制猫@托马拉克-很公平，不过我给了+1:）+1这比我的版本更优雅。但实际上，

$caseStatus

应该命名为

caseStatus

。）和

$（this.val（）=“1”假设太简单了，因为有三种情况。@Tomalak-Better？：）我不确定
1
对状态的解释是什么，但为了尽可能清楚，应该将其命名为该状态。@Tomalak-Woops，我读到
0
和
2
是相同的，没错，这些显示/隐藏是不同的，经过更正更新。@Nick Craver:就是这样。将其表示为单击（函数…）的想法对我来说太晚了一点，现在我不想改变我的答案以避免看起来像一只复制猫@托马拉克-很公平，不过我给了他+1:）这不是有点过分吗？：）那要看情况了。将行为编码为这样的数据将“规则”与作用于规则的逻辑分离。为解释这样的简单数据而编写的处理程序（可能更通用）可能用于许多仅在某些细节上不同的类似结构。我试着自学范畴理论，所以我最近养成了这样的思维习惯：-）@Nick：它可以让你做
$（#auth_status”）.change（函数（）{$.each（authCtrl[$（this）.val（）]，函数（k，v）{$（v）[k]；；）；
：-D（但只有当
#auth_status
的所有可能值都在
authCtrl
中时，…）@Tomalak如果组合问题变得很大，那么更好的方法是调整标记，使其更具协作性。一种方法是将“状态”编码到“行为类”对象中，而不是仅使用“显示”和“隐藏”“。当然，因为我不知道这个页面是如何工作的，所以很难找到最好的答案。这不是有点过分了吗？”：）那要看情况了。将行为编码为这样的数据将“规则”与作用于规则的逻辑分离。为解释这样的简单数据而编写的处理程序（可能更通用）可能用于许多仅在某些细节上不同的类似结构。我试着自学范畴理论，所以我最近养成了这样的思维习惯：-）@Nick：它可以让你做
$（#auth_status”）.change（函数（）{$.each（authCtrl[$（this）.val（）]，函数（k，v）{$（v）[k]；；）；
：-D（但只有当
#auth_status
的所有可能值都在
authCtrl
中时，…）@Tomalak如果组合问题变得很大，那么更好的方法是调整标记，使其更具协作性。一种方法是将“状态”编码到“行为类”对象中，而不是仅使用“显示”和“隐藏”“当然，因为我不知道这个页面是如何工作的，所以很难找到最好的答案。”。