javascript - jquery 变量在更新时不会改变

Question

这是我的问题的简化。我想在输入字段后附加一些文本(在更新同一字段时)，仅当选择元素的值为 IT 时。

这就是字段:

<select id="billing_country">
    <option value="FR">FR</option>
    <option value="IT">IT</option>
</select>

<input type="text" id="woocommerce_cf_piva">

这是脚本:

jQuery(document).ready(function () {

var $country_select = jQuery('#billing_country');

// When country change
$country_select.change(function () {

    var $country = jQuery('#billing_country option:selected');

    $country.each(function() {

        FieldCheck(jQuery(this).val());
    })
});

function FieldCheck($country) {

    var $element = jQuery('#woocommerce_cf_piva');

    if ($country == 'IT') {

        $element.change(function () {

            $element.after($country);
        });
    }
}
});

您可以see this also on jsFiddle

如果我选择 FR，为什么还会附加国家/地区名称？

Answer 1

很难理解您想要用代码做什么。

您希望文本输入仅在选择框选择了“IT”时才更改其值吗？

为什么要在文本输入上设置 change 处理程序？

如果是单个选择，为什么要遍历选择框的选项？只需使用所选选项的值设置文本输入，例如

$(function() {
  var $billingCountry = $('#billing_country');

  $billingCountry.change(function() {
    var $country = $('#billing_country option:selected');
    fieldCheck($country.val());
  });

  function fieldCheck(country) {
    var $element = $('#woocommerce_cf_piva');
    if ($country !== 'IT') {
      return;
    }

    $element.val(country);
  }
});

https://jsfiddle.net/davelnewton/w5deffvk/

编辑

• 命名约定已更改以反射(reflect)典型的 JS
  • 非构造函数名称以小写字母开头
  • 非 JQ 元素变量没有前导 $
• 国家/地区值用作保护子句而不是嵌套逻辑
  • 这段代码很简单，但嵌套会让事情变得更难推理