javascript - 为什么代码不将类重新分配给 id'ed 标签而是中断？

Question

有人可以帮我解决以下问题吗？

我有一个带有 3 个选项的简单下拉菜单，我想在选择选项 3(值为 RU)时删除默认分配给 div 的“隐藏”类(带显示的简单 CSS:无)但是当(再次)选择选项 1 或 2 时重新添加/离开类(class)。

隐藏的 div 的 HTML 是这样的:

<div class="hidden" id="cityRestrictions">
    <label for="cityQuery">Please select the city you were calling from: </label>
    <select id="cityQuery"> 
        <option value="Moscow"> Moscow </option>
        <option value="StPetersburg"> Saint Petersburg </option>
        <option value="Other"> Other </option>
    </select>
</div>

我的javascript如下:

dialInLocation.addEventListener("change", function() {
    let location = document.getElementById('dialInLocation');
    if(location.value == "RU") {
        removeActivityItem();
    }
});

function removeActivityItem() {
    cityRestrictions = cityRestrictions.removeAttribute("class");
}

这很好用。如果我在下拉列表中选择值为 RU 的选项，隐藏的类将从 div 中删除并显示内容。但是，如果我添加一个

if(location.value == "RU") {
    removeActivityItem();
} else {
    addActivityItem();
}

addActivityItem 定义为:

function addActivityItem() {
    cityRestrictions = cityRestrictions.setAttribute("class","hidden");
}

那么我的代码就完全崩溃了。

Answer 1

首先，如果 cityRestrictions 是一个元素，那么你不需要输入 cityRestrictions = cityRestrictions.setAttribute("class","hidden") 因为你可以只输入 cityRestrictions.setAttribute("class","hidden");

其次，我建议使用 cityRestrictions.style.display = "none"; 和 cityRestrictions.style.display 来更改样式，而不是添加类并将其删除= "阻止";