Question

我需要在单击按钮时显示特定div，仅当该URL位于某个成员配置文件上时才显示。如果它不在配置文件页面上显示另一个将显示错误消息的div。我已经写了很长时间，因为我在javascript上并不是那么棒。我的代码有两个问题：

1）只有第一个url会显示正确的div而不是or（||）之后的url？ 2）无论您在哪个页面上显示错误消息的else代码都会显示出来？

请帮忙。

function showdiv() {
    if ((window.location.href == "http://google.com/profile/AA") || (window.location.href == "http://google.com/profile/AA/?xg_source=profiles_memberList")) {
        document.getElementById('AA').style.display = 'block';
        if (document.getElementById('AA').style.display == 'none') document.getElementById('AA').style.display = 'block';
        else document.getElementById('AA').style.display = 'block';
    }
    if ((window.location.href == "http://google.com/profile/BB") || (window.location.href == "http://google.com/profile/BB/?xg_source=profiles_memberList")) {
        document.getElementById('BB').style.display = 'block';
        if (document.getElementById('BB').style.display == 'none') document.getElementById('BB').style.display = 'block';
        else document.getElementById('BB').style.display = 'block';
    }
    if ((window.location.href == "http://google.com/profile/CC") || (window.location.href == "http://google.com/profile/CC/?xg_source=profiles_memberList")) {
        document.getElementById('CC').style.display = 'block';
        if (document.getElementById('CC').style.display == 'none') document.getElementById('CC').style.display = 'block';
        else document.getElementById('CC').style.display = 'block';
    }
    if ((window.location.href == "http://google.com/profile/DD") || (window.location.href == "http://google.com/profile/DD/?xg_source=profiles_memberList")) {
        document.getElementById('DD').style.display = 'block';
        if (document.getElementById('DD').style.display == 'none') document.getElementById('DD').style.display = 'block';
        else document.getElementById('DD').style.display = 'block';
    }
    if ((window.location.href == "http://google.com/profile/EE") || (window.location.href == "http://google.com/profile/EE/?xg_source=profiles_memberList")) {
        document.getElementById('EE').style.display = 'block';
        if (document.getElementById('EE').style.display == 'none') document.getElementById('EE').style.display = 'block';
        else document.getElementById('EE').style.display = 'block';
    }
    if ((window.location.href == "http://google.com/profile/FF") || (window.location.href == "http://google.com/profile/FF/?xg_source=profiles_memberList")) {
        document.getElementById('FF').style.display = 'block';
        if (document.getElementById('FF').style.display == 'none') document.getElementById('FF').style.display = 'block';
        else document.getElementById('FF').style.display = 'block';
    }
    else {
        document.getElementById('error').style.display = 'block';
        if (document.getElementById('error').style.display == 'none') document.getElementById('error').style.display = 'block';
        else document.getElementById('error').style.display = 'block';
    }
}

Answer 1

该代码将成为维护的噩梦。你可能有更好的运气构造它更像这样：

function getId() {
    var href = window.location.href;
    if (href.indexOf('?') != -1) {
        //remove any url parameters
        href = href.substring(0, href.indexOf('?'));
    }
    if (href.charAt(href.length - 1) == '/') {
        //check for a trailing '/', and remove it if necessary
        href = href.substring(0, href.length - 1);
    }
    var parts = href.split("/");
    return parts[parts.length - 1];  //last array element should contain the id 
}

function showdiv(){
    var id = getId();
    var elem = document.getElementById(id);
    if (elem) {
        if (elem.style.display == 'none') {
            elem.style.display = 'block';
        }
        else {
            elem.style.display = 'none';
        }
    }
    else {
        if (document.getElementById('error').style.display == 'none') {
            document.getElementById('error').style.display='block'; 
        }
        else {    
            document.getElementById('error').style.display='none';
        }
    }
}

Answer 2

你应该先弄清楚逻辑。

这段代码毫无意义。

document.getElementById('AA').style.display = 'block';
if (document.getElementById('AA').style.display == 'none') {
    document.getElementById('AA').style.display = 'block';
}
else {
    document.getElementById('AA').style.display = 'block';
}

在结构上，它类似于此代码（简化和注释）

var a = 'block';
// this if will never be true, because we just set a to "block"
if (a == 'none') {
    a = 'block';
}
// this else will always execute and set a to "block" again.
// something that was already done in the first line.
else {
    a = 'block';
}

同时尝试将代码的重复部分考虑在内，因为@aroth已经很好地证明了这一点。

根据网址显示特定的div

2 个答案: