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

这是＆＃34;提交＆＃34;正在破碎的功能，我认为是由于上述原因。

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）您可以通过在事件侦听器绑定中组合选择器来开始。

2）然后进入内部后，您可以通过选中name属性来确定触发更改事件的选项。

3）由于$(".RN, .BN, .DN").hide()下拉列表的switch语句的每种情况都发生YourLocation，我们可以将其抽象出来并在开头运行它，从而无需使用默认情况，以及减少重复的代码。相同的概念适用于$(".MCN, .CN").hide()下拉列表的ReqType。然后在案例陈述中，你要担心的只是展示你想要展示的那些。

$('.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>元素将默认提交表单。由于您希望在提交表单之前进行一些处理/验证，因此您需要致电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函数吗？

1 个答案: