Question

我做了它所以当我点击一个按钮时div被隐藏并显示但是在所有函数中使用相同的变量我如何将其缩短为1 var所以我不必制作一个巨大的代码。我试图用vars创建一个函数并将函数放在另一个函数中，但我之前从未这样做过所以我不知道该怎么做但是没有成功。

zichtbaar表示=显示 verstopt意味着=隐藏

function Home() {
            var item2 = document.getElementById("home");
            var item3 = document.getElementById("btwomzetten");
            var item4 = document.getElementById("abcformule");
            var item5 = document.getElementById("kwadraten");
            var item6 = document.getElementById("coderen");
            if(item2.className == "verstopt"){
            item2.className = "zichtbaar";
            item3.className = "verstopt";
            item4.className = "verstopt";
            item5.className = "verstopt";
            item6.className = "verstopt";
            }
        }
        function BTWomzetten() {
            var item2 = document.getElementById("home");
            var item3 = document.getElementById("btwomzetten");
            var item4 = document.getElementById("abcformule");
            var item5 = document.getElementById("kwadraten");
            var item6 = document.getElementById("coderen");
            if(item3.className == "verstopt"){
            item3.className = "zichtbaar";
            item2.className = "verstopt";
            item4.className = "verstopt";
            item5.className = "verstopt";
            item6.className = "verstopt";
            }
        }
        function Abcformule() {
            var item2 = document.getElementById("home");
            var item3 = document.getElementById("btwomzetten");
            var item4 = document.getElementById("abcformule");
            var item5 = document.getElementById("kwadraten");
            var item6 = document.getElementById("coderen");
            if(item4.className == "verstopt"){
            item4.className = "zichtbaar";
            item2.className = "verstopt";
            item3.className = "verstopt";
            item5.className = "verstopt";
            item6.className = "verstopt";
            }
        }
        function Kwadraten() {
            var item2 = document.getElementById("home");
            var item3 = document.getElementById("btwomzetten");
            var item4 = document.getElementById("abcformule");
            var item5 = document.getElementById("kwadraten");
            var item6 = document.getElementById("coderen");
            if (item5.className == "verstopt"){
            item5.className = "zichtbaar";
            item2.className = "verstopt";
            item3.className = "verstopt";
            item4.className = "verstopt";
            item6.className = "verstopt";
            }
        }
        function Coderen() {
            var item2 = document.getElementById("home");
            var item3 = document.getElementById("btwomzetten");
            var item4 = document.getElementById("abcformule");
            var item5 = document.getElementById("kwadraten");
            var item6 = document.getElementById("coderen");
            if (item6.className == "verstopt"){
            item6.className = "zichtbaar";
            item2.className = "verstopt";
            item3.className = "verstopt";
            item4.className = "verstopt";
            item5.className = "verstopt";
            }
        }

Answer 1

看起来你有7个项目，当你点击一个项目时，你想让它改变为“zichtbar”，其余的改为“verstopt”。为什么不简化呢？

单击按钮，将所有7个元素更改为“verstopt”，然后将活动项目设置为zichtbar

我已经制作了一个小型的编解码器，可以更高效地完成上述（粗略）操作。 Codepen example

// called from each button click.
function clickme(event) 
{
 var elements = document.getElementsByTagName("button");
 for (var loop = 0; loop < elements.length; loop++) 
  {    
    if (elements[loop] == event.target) {
    // if the element in the array is the same as the event target, then set active
    elements[loop].className = "active";
  } 
  else 
  {
   // otherwise set inactive.
   elements[loop].className = "inactive";
  }
 }
 return false;
}

Answer 2

jquery好吗？

给出应该受影响的所有元素，然后使用jquery来影响所有元素

$('#button_selector').on('click', function(){ 
    $('.class_name').toggle('show')
});

我能链接一些变量吗？

2 个答案: