javascript - jQuery 变量被多次定义 : for events and when the page loads

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

现在，如果您必须更改代码，您可以在一处而不是两处进行。