Question

我需要帮助来整合/缩小以下代码。最初我有一个下拉菜单，根据价值控制div的可见性。它适用于Click但由于它是一个数据库页面，它不能在onLoad上工作，所以我不得不添加第二个逻辑。非常感谢任何建议/意见。

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

Answer 1

您可以通过简化if / else结构来减少代码（因为"1"以外的任何内容都是相同的显示/隐藏结果，并且只是调用处理程序页面首次加载时的绑定，如下所示：

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

Answer 2

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

  toggleElements();                         // initial call (on page load)
  $("#auth_status").click(toggleElements);  // manual call (on user click)
});

Answer 3

您可以定义几个对象：

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

和其他情况类似（向后）。然后，处理程序只根据该字段值获取条目，并按照指示隐藏/显示。

jquery单击（函数）onload

3 个答案: