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，请将所有状态名称放在数组中并循环遍历数组以隐藏它们。

如何压缩onclick代码是动态的

1 个答案: