我可以合并两个具有不同唯一名称的 Javascript 函数吗？

Question

我有两个 Javascript 函数，我想知道是否有可能以某种方式合并它们，因为我认为它破坏了第三个函数的功能。我想要两个以某种方式合并的两个如下：

    $("select[name='YourLocation']").on("change", function () {
        switch ($(this).val()) {
            case 'Branch':
                $('.RN, .BN, .DN').hide();
                $('.RN, .BN, .DN').show();
                break;
            case 'Region':
                $('.RN, .BN, .DN').hide();
                $('.RN').show();
                $('.DN').show();
                break;
            case 'Division':
                $('.RN, .BN, .DN').hide();
                $('.DN').show();
                break;
            default:
                $('.RN, .BN, .DN').hide();
        }
    });

    $('.RN, .BN, .DN').hide();

    //2nd function

    $("select[name='ReqType']").on("change", function () {
        switch ($(this).val()) {
            case 'SMAC':
                $('.MCN, .CN').hide();
                $('.MCN, .CN').show();
                break;
            case 'CreditCardACHPosting':
                $('.MCN, .CN').hide();
                $('.MCN, .CN').show();
                break;
            case 'Mission Account Research':
                $('.MCN, .CN').hide();
                $('.MCN, .CN').show();
                break;
            case 'Mission AR Credit Memo':
                $('.MCN, .CN').hide();
                $('.MCN, .CN').show();
                break;
            case 'Mission AR Debit Memo':
                $('.MCN, .CN').hide();
                $('.MCN, .CN').show();
                break;
            case 'Customer Refund':
                $('.MCN, .CN').hide();
                $('.MCN, .CN').show();
                break;
            case 'Commercial Inquiry':
                $('.MCN, .CN').hide();
                $('.MCN, .CN').show();
                break;
            default:
                $('.MCN, .CN').hide();
        }
    });
    $('.MCN, .CN').hide();

这是发生故障的 "submit" 函数，我认为这是由于上述原因造成的。

window.onload = function () {
    document.getElementById('DateCreated').value = getDate();
};
function FormRequest() {
    checkFile()
    var formData = form2js('JsonForm', '.', false, "", "", true);
    document.getElementById('txthiddenjson').value = JSON.stringify(formData, null, '\t');
}

按钮代码：

                                    <button class="btn btn-block btn-info btn-lg" name="Submit" onclick="FormRequest();">Submit</button>
                                <input type="hidden" name="txthiddenjson" id="txthiddenjson" />

谢谢！

Answer 1

如果你想把这两个功能合二为一，可以这样简化：

1) 您可以从结合 selector 事件侦听器绑定开始。

2) 然后一旦进入，您可以通过检查 name 属性来确定哪个 select 正在触发更改事件。

3) 由于在 YourLocation 下拉列表的 switch 语句的每种情况下都会发生 $(".RN, .BN, .DN").hide()，我们可以将其抽象出来并在开头运行，删除需要默认情况，以及减少重复代码。同样的概念适用于 $(".MCN, .CN").hide() 的 ReqType 下拉列表。然后在case语句中，你只需要担心显示你想显示的。

$('.MCN, .CN').hide();
$('.RN, .BN, .DN').hide();

$("select[name='YourLocation'], select[name='ReqType']").on("change", function () {
  var trigger = $(this);
  if (trigger.attr("name") === "YourLocation") {
    $('.RN, .BN, .DN').hide();
  }
  else if (trigger.attr("name") === "ReqType"){
    $('.MCN, .CN').hide();
  }
  
  switch (trigger.val()) {
    case 'Branch': {
      $('.RN, .BN, .DN').show();
      break;
    }
    case 'Region': {
      $('.RN, .DN').show();
      break;
    }
    case 'Division': {
      $('.DN').show();
      break;
    }
    case 'SMAC': {
      $('.MCN, .CN').show();
      break;
    }
    case 'CreditCardACHPosting': {
      $('.MCN, .CN').show();
      break;
    }
    case 'Mission Account Research': {
      $('.MCN, .CN').show();
      break;
    }
    case 'Mission AR Credit Memo': {
      $('.MCN, .CN').show();
      break;
    }
    case 'Mission AR Debit Memo': {
      $('.MCN, .CN').show();
      break;
    }
    case 'Customer Refund': {
      $('.MCN, .CN').show();
      break;
    }
    case 'Commercial Inquiry': {
      $('.MCN, .CN').show();
      break;
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="YourLocation">
  <option value="">--Select Location--</option>
  <option value="Branch">Branch</option>
  <option value="Region">Region</option>
  <option value="Division">Division</option>
</select>
<select name="ReqType">
  <option value="">--Select Req Type--</option>
  <option value="SMAC">SMAC</option>
  <option value="CreditCardACHPosting">CreditCardACHPosting</option>
  <option value="Mission Account Research">Mission Account Research</option>
  <option value="Mission AR Credit Memo">Mission AR Credit Memo</option>
  <option value="Mission AR Debit Memo">Mission AR Debit Memo</option>
  <option value="Customer Refund">Customer Refund</option>
  <option value="Commercial Inquiry">Commercial Inquiry</option>
</select>
<div class="hiddenItems">
  <div class="RN">.RN</div>
  <div class="BN">.BN</div>
  <div class="DN">.DN</div>
  <div class="MCN">.MCN</div>
  <div class="CN">.CN</div>
</div>

就提交表单而言，默认情况下，表单内的 <button> 个元素将提交表单。由于您想在提交表单之前做一些 processing/validation，因此您需要调用 event.preventDefault()，然后使用 $("form").submit() 手动提交表单，如下所示：

HTML

<form id="myForm">
    <!-- Rest of form -->
    <button class="btn btn-block btn-info btn-lg" name="Submit">Submit</button>
    <input type="hidden" name="txthiddenjson" id="txthiddenjson" />
</form>

JS

$("#myForm").on("submit", function (event) {
  event.preventDefault(); // prevent default form submit
  checkFile();
  var formData = form2js('JsonForm', '.', false, "", "", true);
  $('#txthiddenjson').val(JSON.stringify(formData, null, '\t'));
  $(this).submit(); // manually submit form when you are ready
});

我可以合并两个具有不同唯一名称的 Javascript 函数吗？

Can I merge two Javascript functions that have different unique names?

javascript

jquery

jquery-events