根据if语句显示div

Question

根据if语句显示div

3

我尝试使用这段代码根据URL参数“direction”隐藏或显示DIV，但无法使其工作，并想知道是否有更好的方法。示例网址 = http://domain.com?direction=south&season=summer - 谢谢

<head>
<script type="text/javascript">

        function getUrlVars()
        {
            var vars = [], hash;
            var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
            for(var i = 0; i < hashes.length; i++)
            {
                hash = hashes[i].split('=');
                vars.push(hash[0]);
                vars[hash[0]] = hash[1];
            }
            return vars;
        }

        var myVal = getUrlVars()["direction"];


        if(myVal == "north") {

            document.getElementById('north').style.display = 'block'; 
        }else {

            document.getElementById('south').style.display = 'none'; 

        }
        </script>
        </head>

        <body>

        <div id="north">Some text</div>

        <div id="south">Some text</div>

        </body>

- user1072100

你说：“我无法让这个工作。” 你能更具体一些吗？有什么意外的事情发生了吗？ - George Cummins

1

你是在使用JavaScript还是jQuery？我在你的代码中没有看到jQuery。 - BalusC

无论存在什么URL参数，这两个div始终都会出现。 - user1072100

@user1072100，这是因为您的JavaScript在页面上的DIV出现之前就已经运行了...您需要将代码放入一个函数中，并在页面加载后调用该函数-请参见下面的答案...... - Manse

4个回答

1

也许在 if/else 语句中，您需要显示和隐藏其他 div，以便在每个条件下显示正确的 div 并隐藏正确的 div？

if(myVal == "north") {
    document.getElementById('north').style.display = 'block'; 
    document.getElementById('south').style.display = 'none'; 
}else {
    document.getElementById('north').style.display = 'none'; 
    document.getElementById('south').style.display = 'block'; 
}

- Jon Erickson

0

对于一个纯JavaScript方法，您需要添加更改window.onload事件以运行您的代码 - 这确保DOM元素存在以运行您的代码：

http://jsfiddle.net/manseuk/RTrgN/2/

function getUrlVars() {
    var vars = [],
        hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for (var i = 0; i < hashes.length; i++) {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}

function runMe() {

    var myVal = getUrlVars()["direction"];


    if (myVal == "north") {

        document.getElementById('north').style.display = 'block';
    } else {

        document.getElementById('south').style.display = 'none';

    };
}

window.onload = runMe; // run the code once the DOM is loaded

- Manse

0

创建一个函数，并将其分配给body的onload事件。还要修复一下if的样式。

<head>
<script type="text/javascript">

        function getUrlVars()
        {
            var vars = [], hash;
            var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
            for(var i = 0; i < hashes.length; i++)
            {
                hash = hashes[i].split('=');
                vars.push(hash[0]);
                vars[hash[0]] = hash[1];
            }
            return vars;
        }

        function myOnLoad()
        {
            var myVal = getUrlVars()["direction"];


            if(myVal == "north") {
                document.getElementById('north').style.display = 'block'; 
                document.getElementById('south').style.display = 'none';
            }else {
                document.getElementById('north').style.display = 'none'; 
                document.getElementById('south').style.display = 'block';
            }
        }
        </script>
        </head>

        <body onload="myOnLoad()">

        <div id="north">Some text</div>

        <div id="south">Some text</div>

    </body>

- CrashCodes

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ipr101 · Accepted Answer

如果您正在使用jQuery，则缺少$(document).ready代码块，或者window.onload代码块。

$(document).ready(function() {
    var myVal = getUrlVars()["direction"];

    if(myVal == "north") {
        document.getElementById('north').style.display = 'block'; 
    }else {
        document.getElementById('south').style.display = 'none'; 
    }
});

或者不使用 jQuery -

window.onload = function() {
        var myVal = getUrlVars()["direction"];

        if(myVal == "north") {
            document.getElementById('north').style.display = 'block'; 
        }else {
            document.getElementById('south').style.display = 'none'; 
        }
}

可能是因为在尝试显示/隐藏div时，这些div尚未加载到DOM中，导致您的代码无法正常工作。

示例：http://jsfiddle.net/manseuk/RTrgN/1/