Question

此代码基本上在我的页面上生成7个标签，onclick，更改另一个div标签的内容。代码有效，但时间太长。我想也许与其他if语句有关，但我是javascript的新手，我不认为我在那里。

<script>
            function showBaseChakra(text) {
                if(text.id == "baseChakra") {
                    document.getElementById("baseChakraInfo").style.display = "block";
                    document.getElementById("defaultText").style.display = "none";
                    document.getElementById("sacralChakraInfo").style.display = "none";
                    document.getElementById("solarPlexusChakraInfo").style.display = "none";
                    document.getElementById("heartChakraInfo").style.display = "none";
                    document.getElementById("throatChakraInfo").style.display = "none";
                    document.getElementById("browChakraInfo").style.display = "none";
                    document.getElementById("crownChakraInfo").style.display = "none";
                }
            }

            function showSacralChakra(text) {
                if(text.id == "sacralChakra") {
                    document.getElementById("sacralChakraInfo").style.display = "block";
                    document.getElementById("defaultText").style.display = "none";
                    document.getElementById("baseChakraInfo").style.display = "none";
                    document.getElementById("solarPlexusChakraInfo").style.display = "none";
                    document.getElementById("heartChakraInfo").style.display = "none";
                    document.getElementById("throatChakraInfo").style.display = "none";
                    document.getElementById("browChakraInfo").style.display = "none";
                    document.getElementById("crownChakraInfo").style.display = "none";
                }
            }

            function showSolarPlexusChakra(text) {
                if(text.id == "solarPlexusChakra") {
                    document.getElementById("solarPlexusChakraInfo").style.display = "block";
                    document.getElementById("defaultText").style.display = "none";
                    document.getElementById("baseChakraInfo").style.display = "none";
                    document.getElementById("sacralChakraInfo").style.display = "none";
                    document.getElementById("heartChakraInfo").style.display = "none";
                    document.getElementById("throatChakraInfo").style.display = "none";
                    document.getElementById("browChakraInfo").style.display = "none";
                    document.getElementById("crownChakraInfo").style.display = "none";
                }
            }

            function showHeartChakra(text) {
                if(text.id == "heartChakra") {
                    document.getElementById("heartChakraInfo").style.display = "block";
                    document.getElementById("defaultText").style.display = "none";
                    document.getElementById("baseChakraInfo").style.display = "none";
                    document.getElementById("sacralChakraInfo").style.display = "none";
                    document.getElementById("solarPlexusChakraInfo").style.display = "none";
                    document.getElementById("throatChakraInfo").style.display = "none";
                    document.getElementById("browChakraInfo").style.display = "none";
                    document.getElementById("crownChakraInfo").style.display = "none";
                }
            }

            function showThroatChakra(text) {
                if(text.id == "throatChakra") {
                    document.getElementById("throatChakraInfo").style.display = "block";
                    document.getElementById("defaultText").style.display = "none";
                    document.getElementById("baseChakraInfo").style.display = "none";
                    document.getElementById("sacralChakraInfo").style.display = "none";
                    document.getElementById("solarPlexusChakraInfo").style.display = "none";
                    document.getElementById("heartChakraInfo").style.display = "none";
                    document.getElementById("browChakraInfo").style.display = "none";
                    document.getElementById("crownChakraInfo").style.display = "none";
                }
            }

            function showBrowChakra(text) {
                if(text.id == "browChakra") {
                    document.getElementById("browChakraInfo").style.display = "block";
                    document.getElementById("defaultText").style.display = "none";
                    document.getElementById("baseChakraInfo").style.display = "none";
                    document.getElementById("sacralChakraInfo").style.display = "none";
                    document.getElementById("solarPlexusChakraInfo").style.display = "none";
                    document.getElementById("heartChakraInfo").style.display = "none";
                    document.getElementById("throatChakraInfo").style.display = "none";
                    document.getElementById("crownChakraInfo").style.display = "none";
                }
            }

            function showCrownChakra(text) {
                if(text.id == "crownChakra") {
                    document.getElementById("crownChakraInfo").style.display = "block";
                    document.getElementById("defaultText").style.display = "none";
                    document.getElementById("baseChakraInfo").style.display = "none";
                    document.getElementById("sacralChakraInfo").style.display = "none";
                    document.getElementById("solarPlexusChakraInfo").style.display = "none";
                    document.getElementById("heartChakraInfo").style.display = "none";
                    document.getElementById("throatChakraInfo").style.display = "none";
                    document.getElementById("browChakraInfo").style.display = "none";
                }
            }
        </script>

Answer 1

你可以像这样创建一个单独的函数 - 给所有元素一个共享类 - 让我们说chakras - 并循环它们：

＆＃13;

function change(text) {
   [].forEach.call(document.getElementsByClassName('chakras'), function(val) {
        val.style.display = val.id == text.id + 'Info' ? 'block' : 'none';
   });
}

change({id: 'baseChakra'}); // just to demo, call the function like before

＆＃13;

<div class="chakras" id="baseChakraInfo">a</div>
<div class="chakras" id="defaultText">b</div>
<div class="chakras" id="sacralChakraInfo">c</div>
<div class="chakras" id="solarPlexusChakraInfo">d</div>
<div class="chakras" id="heartChakraInfo">e</div>
<div class="chakras" id="throatChakraInfo">f</div>
<div class="chakras" id="browChakraInfo">g</div>
<div class="chakras" id="crownChakraInfo">h</div>

＆＃13;

Answer 2

function show(list, show) {
    for(var key in list){
        document.getElementById(key).style.display= "none";
    }
    document.getElementById(show).style.display= "block";
}

您可以尝试上面这样的功能

如何简化我的javascript代码，它似乎太长而且凌乱？

2 个答案: