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

如果您可以更新元素以具有公共(public)类，例如 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，请将所有州名称放入一个数组中，然后循环遍历该数组以隐藏它们。