Question

我正在尝试编写一个函数，它接受一个div的id，检查该id与其他id的列表，显示与传入的id相关的div，并导致所有其他div为id列表不显示。

<script type="text/javascript">
function display_page(id) {
//list of ids that I want to check against
   var pages = ['home', 'about', 'listen', 'more']; 
    for (var i=0; i<pages.length; i++) {
        var e = document.getElementById(pages[i]);
        if (pages[i] == id){
            e.style.display = 'block';
            alert(e);
        } 
        else{
             e.style.display = 'none';  
            alert(e);
        }
    }
</script>

我的函数调用结构如下：

<li class="active" class="test"><a href="#" onclick="display_page('home');">Home</a></li>

不确定为什么这不起作用 - 作为一个说明，我的ID是独一无二的所以我不认为这是问题。点击相关链接（如上面发布的链接）后，警报不会显示。谢谢你的帮助！

Answer 1

您可以使用 querySelectorAll 来提供帮助：

function display_page(id) {

    var pages = document.querySelectorAll('#home, #about, #listen, #more');

    for (var i=0, iLen=pages.length; i<iLen; i++) {
      pages[i].style.display = pages[i].id == id? '' : 'none';
    }
}

我想知道什么时候迭代器会被添加到NodeList接口，所以我们可以这样做：

var id = 'home';
document.querySelectorAll('#home, #about, #listen, #more').forEach(function(el) {
    el.style.display = el.id == id? '' : 'none';
});

请注意，在＆＃39; none＆＃39;之间切换和＆＃39;＆＃39; （空字符串）是首选，以便元素采用其默认或继承的样式，并且您不必对可能的内容进行硬编码。

哦，没有qSA：

function display_page(id) {
    var ids = ['home', 'about', 'listen', 'more'];

    for (var i=0, iLen=ids.length; i<iLen; i++) {
      page = document.getElementById(ids[i]);
      page.style.display = page.id == id? '' : 'none';
    }
}

这个依赖于ES5 forEach ：

function display_page(showId) {
    ['home', 'about', 'listen', 'more'].forEach(function(id) {
        var page = document.getElementById(id);
        page.style.display = page.id == showId? '' : 'none';
    });
}

Javascript：显示一个div的内容，让其他人看不见

1 个答案: