javascript - 如何将 onclick 代码压缩为动态的

Question

我试图让这个 onclick 函数代码是动态的。我不希望所有州都有 50 个代码块。他是代码的快速片段

    var Ohio=function(){
    document.getElementById('texas').style.display='none';
    document.getElementById('florida').style.display='none';
    document.getElementById('ohio').style.display='block';

    }

等等等等.....

传递函数的html：

<li onclick="Ohio()" id="ohio" >

等等等等我将如何压缩它以使其更小和动态？

Answer 1

如果您可以将元素更新为具有公共类，例如class="state"，那么：

var SetState = function(state) {
    var s = document.getElementsByClassName("state"),
        i;
    for (i=0; i < s.length; i++)
        s[i].style.display = 'none';

    document.getElementById(state).style.display = 'block';
};

也就是说，循环遍历state类中的所有元素并隐藏它们，然后只显示传递给函数的元素：

SetState('ohio');

或者，如果您无法更改 html，请将所有状态名称放入一个数组中并循环遍历该数组以隐藏它们。