javascript - 函数内变量的值随时间变化而无需重新分配

Question

<script>
    document
            .getElementById('country')
            .addEventListener('change', function() {
                'use strict';
                var value1 = this.value;
                console.log(value1);
                var vis = document.querySelectorAll('.input-group-addon'),
                country = document.getElementsByClassName(value1);
                console.log(country.length);
                // Point One
                var i;
                if (vis !== null) {
                    for (i = 0; i < vis.length; i++)
                        vis[i].className = 'input-group-addon inv';
                    console.log(country.length);
                    // Point Two
                }
                if (country !== null) {
                    for (i = 0; i < country.length; i++) {
                        country[i].className = 'input-group-addon';
                        // Point Three
                    }
                }
            });
    </script>

这个问题已经困扰我一段时间了。我正在尝试获取

中选定值的值

document.querySelectorAll('.input-group-addon')

并在

中查找匹配的类名

document.getElementsByClassName(value1)

国家/地区的节点列表在第一点可用，在第二点更改为空。

我的代码中是否存在基本逻辑或语法错误？

Answer 1

and changes to null at Point Two

我假设您的意思是该列表是空的。该变量不应神奇地变为 null。

getElementsByClassName返回 live HTMLCollection。这意味着它将始终反射(reflect)文档的当前状态。如果更改元素的类名称，它将自动添加到集合中或从集合中删除。

如果您不希望这样，则可以使用 querySelectorAll(它返回不事件的集合)，或者 convert the collection to an array .