JSFiddle

Question

我在我的网站上设置了一个“生物”部分，我有3张员工图片，下面是每个员工BIOS的3个div。我想默认隐藏所有BIOS，然后只显示与单击的图像关联的div并隐藏所有其他div。

目前似乎没有找到元素因为我得到了“未定义”

到目前为止，这是我的HTML：

<div onclick="showhide('bill');" class="bio_image"><div class="name">Bill Murray</div></div>
<div onclick="showhide('bill2');" class="bio_image"><div class="name">Bill Murray</div></div>
<div onclick="showhide('bill3');" class="bio_image"><div class="name">Bill Murray</div></div>
<div class="hide" id="bill">BILL</div>
<div class="hide" id="bill2">BILL2</div>
<div class="hide" id="bill3">BILL3</div>

我的Javascript：

function showhide(id){
        if (document.getElementById) {
          var divid = document.getElementById(id);
          var divs = document.getElementsByClassName("hide");
          for(var div in divs) {
             div.style.display = "none";
          }
          divid.style.display = "block";
        } 
        return false;
 }

JSFiddle

有什么想法吗？谢谢！

Answer 1

使用常规for循环，因为for in循环将循环遍历NodeList的其他属性，而不仅仅是元素列表

function showhide(id){
        if (document.getElementById) {
          var divid = document.getElementById(id);
          var divs = document.getElementsByClassName("hide");
          for(var i=0;i<divs.length;i++) {
            divs[i].style.display = "none";
          }
          divid.style.display = "block";
        } 
        return false;
 }

JSFiddle

Answer 2

使用for(var div in divs)时，div 不元素。迭代JSON对象时使用此表示法。

你想改用它：

for(var i = 0; i < divs.length; i++) {
    divs[i].style.display = "none";
}

Answer 3

    try this, it is a working code 
        <!DOCTYPE html>
        <html>
        <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
        .share-list {
            display:none;
        }
        </style>
        </head>
        <body>

        <div onclick="shareListHideShow('t1')">
        temp1
            <div class="share-list" id="t1">t1</div>
        </div>
        <div onclick="shareListHideShow('t2')">
        temp2
            <div class="share-list" id="t2">t2</div>
        </div>
        <div onclick="shareListHideShow('t3')">
        temp3
            <div class="share-list" id="t3">t3</div>
        </div>
        <div onclick="shareListHideShow('t4')">
        temp4
            <div class="share-list" id="t4">t4</div>
        </div>
        <div onclick="shareListHideShow('t5')">
        temp5
            <div class="share-list" id="t5">t5</div>
        </div>

        <div id="out"></div>

        <script>
        //window.onload = myfunc();
        function shareListHideShow(actionId){
            var divs = document.getElementsByClassName("share-list");
            for(var i=0;i<divs.length;i++) {
                if(divs[i].id == actionId){
                    if(divs[i].style.display === "block"){
                        divs[i].style.display = "none";
                    }else{
                        divs[i].style.display = "block";
                    }
                }
                else
                    divs[i].style.display = "none";
            }
        }
        </script>
</body>
</html>

使用Javascript显示1 div并隐藏所有其他人

JSFiddle

3 个答案: