jQuery变量定义了多次：用于事件和页面加载时

Question

我有一个表单，用户从列表中选择一个国家/地区。 当页面加载列表中的第一个国家/地区时，或者显示先前已设置的用户所在国家/地区。 如果所选国家/地区是阵列EUcountries国家中的国家/地区，则会显示带有字段的div。

 var EUcountries = [ "AD", "BE", "BG", ]; // this is for when the page loads var inputCountry = $("#countries").val(); if ($.inArray(inputCountry, EUcountries) != -1) { $('#EUdiv').show(); } else { $('#EUdiv').hide(); } // this is for when the user selects a country. $("#countries").on('input', function () { var inputCountry = $("#countries").val(); if ($.inArray(inputCountry, EUcountries) != -1) { $('#EUdiv').show(); } else { $('#EUdiv').hide(); } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="countries" name="countries" class="form-control"> <option value="AF">Afghanistan</option> <option value="AL">Albania</option> <option value="DZ">Algeria</option> <option value="AS">American Samoa</option> <option value="AD">Andorra</option> <option value="AO">Angola</option> <option value="AI">Anguilla</option> <option value="AQ">Antarctica</option> <option value="AG">Antigua &amp; Barbuda</option> <option value="AR">Argentina</option> <option value="AM">Armenia</option> </select> <br> <div id="EUdiv"> <input id="euField"> </div> 

如您所见，我在页面加载后设置var inputCountry （因为已经设置了国家/地区）以及每次更改输入时。

这是要走的路还是我会遇到问题？

（选择安道尔看它有效）

Answer 1

您遇到的问题是您正在复制代码。 所以你有两次相同的代码。 只需要一次代码。

使用触发器

$("#countries").on('input', function () {
  var inputCountry = $("#countries").val();
  if ($.inArray(inputCountry, EUcountries) != -1) {
    $('#EUdiv').show();
  } else {
    $('#EUdiv').hide();
  }
}).trigger("input");

或使其成为函数调用。

var countyChange = function () {}
$("#countries").on('input', countyChange)
countyChange()

现在，如果你必须改变代码，你就是在一个地方而不是两个地方。