Javascript条件语句无法正常工作

时间:2015-06-17 11:37:15

标签: javascript html html5

我发现使用此Javascript代码时出现问题会使下载选项列表显示并根据触发时的可见性相应消失:如果它可见,则会隐藏。如果它被隐藏,它将是可见的。

window.openList = function(listName) {
    var list = document.getElementById(listName + "-list");
    if (list.style.visibility == "hidden") {
        list.style.visibility = "visible";
    } else if (list.style.visibility == "visible") {
        list.style.visibility = "hidden";
    }
}

这里是将与Javascript交互的HTML:

<div id="downloads">
                <div id="redtech-gpu-download" class="downloads">
                    <p onclick="javascript: openList('redtech-gpu-download');">Redtech GPU</p>
                    <div id="redtech-gpu-download-list" class="download-list">
                        <span class="download-list-item download-list-item-a">
                            <p onclick="javascript: window.open('files/redtech-gpu-001.zip', '_blank');">GPU Ver 0.0.1 Alpha</p>
                        </span>
                        <span class="download-list-item download-list-item-b">
                            <p>{ More Coming Soon! }</p>
                        </span>
                    </div>
                </div>

                <div id="redtech-memory-download" class="downloads">
                    <p onclick="javascript: openList('redtech-memory-download');">Redtech Memory</p>
                    <div id="redtech-memory-download-list" class="download-list">
                        <!--<span class="download-list-item download-list-item-a">
                            <p onclick="javascript: window.open('files/redtech-memory-001.zip', '_blank');">Memory Ver 0.0.1 Alpha</p>
                        </span>-->
                        <span class="download-list-item download-list-item-b">
                            <p>{ Coming Soon! }</p>
                        </span>
                    </div>
                </div>
            </div>

2 个答案:

答案 0 :(得分:1)

在您提供的代码中,在您尝试检查之前未设置""。因此,它的值将为"visible",它不等于"hidden"style="visibility:visible;"

您可以使用两种可能的快速修复代码来解决此问题:在您计划隐藏的代码上包含else if,或者使else语句只是--no-daemon 1}}语句(不,如果)。

答案 1 :(得分:0)

您的陈述不正确。这就是你实际做的事情:

if (something) {
   //do something
} 

else if (list.style.visibility == "visible") {
    //if the if case is false do this:
}

但是通常在这之后会是一个else子句,如果没有与上述语句匹配的话该怎么办。

正确的方法是:

&#13;
&#13;
window.openList = function(listName) {
    var list = document.getElementById(listName + "-list");
    console.log(list);
    if (list.style.visibility == "hidden") {
        list.style.visibility = "visible";
    } else {
        list.style.visibility = "hidden";
    }
}
&#13;
<div id="downloads">
                <div id="redtech-gpu-download" class="downloads">
                    <p onclick="openList('redtech-gpu-download');">Redtech GPU</p>
                    <div id="redtech-gpu-download-list" class="download-list">
                        <span class="download-list-item download-list-item-a">
                            <p onclick="javascript: window.open('files/redtech-gpu-001.zip', '_blank');">GPU Ver 0.0.1 Alpha</p>
                        </span>
                        <span class="download-list-item download-list-item-b">
                            <p>More Coming Soon!</p>
                        </span>
                    </div>
                </div>

                <div id="redtech-memory-download" class="downloads">
                    <p onclick="javascript: openList('redtech-memory-download');">Redtech Memory</p>
                    <div id="redtech-memory-download-list" class="download-list">
                        <!--<span class="download-list-item download-list-item-a">
                            <p onclick="javascript: window.open('files/redtech-memory-001.zip', '_blank');">Memory Ver 0.0.1 Alpha</p>
                        </span>-->
                        <span class="download-list-item download-list-item-b">                          <p> Coming Soon!</p>
                        </span>
                    </div>
                </div>
            </div>
&#13;
&#13;
&#13;