Question

我有很多div，其班级名称为dis

HTML：

<div class="dis">Content</div>
<div class="dis">Content</div>
<div class="dis">Content</div> and so on ...

有很多图片：

<img src="icons/image1.png" class="admoicn" onclick="toggle_visibility('dis');" >
<img src="icons/image2.png" class="admoicn" onclick="toggle_visibility('dis');" >
<img src="icons/image3.png" class="admoicn" onclick="toggle_visibility('dis');" >

CSS：

.dis{  
    display:none;
    width:100px;
    height:100px;  
}

的javascript：

function toggle_visibility(id) {
    var e = document.getElementsByClassName(id)[0];
    if(e.style.display =="block"){
        e.style.display ="none";
    }
    else{
        e.style.display ="block";
    }
}

点击任何图片，特定div dis应该是打开的，我的意思是点击第三个image3.png第三个div dis应该打开并关闭所有打开的dis div

我认为这是array课上的javascript问题，我不知道如何修复它。我对javascript很新。

Answer 1

您可以为toggle_visibility函数添加参数：

<img src="icons/image1.png" class="admoicn" onclick="toggle_visibility('dis', 0);" >
<img src="icons/image2.png" class="admoicn" onclick="toggle_visibility('dis', 1);" >
<img src="icons/image3.png" class="admoicn" onclick="toggle_visibility('dis', 2);" >

并将其用作数组的索引：

function toggle_visibility(id, index) {                    // added index here
    // close all divs
    var els = document.getElementsByClassName(id);
    for (var i = 0; i < els.length; i++) {
        els[i].style.display ="none"
    }

    // show selected div
    els[index].style.display = "block";
}

JSFiddle demo here.

顺便说一句，如果参数是一个类名，你应该把它命名为（不是id，就像你现在一样，这是非常误导的。）

Answer 2

非常简单，这个codepen将帮助您实现它。

＆＃13;

$(document).ready(function(){
    $("img").click(function(){
        var classname = this.id;
        $('div').removeClass('show');
        $("."+classname).addClass('show');
    });
});

＆＃13;

img{
      cursor:pointer;
      width : 30px;
      padding:20px;
      border:1px solid #333;
}

div{
      display:none;
}
.show{
      display:block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://image.flaticon.com/icons/svg/149/149384.svg" id="Phone" />
<img src="http://image.flaticon.com/icons/svg/149/149181.svg" id="chem" />
<img src="http://image.flaticon.com/icons/svg/149/149098.svg" id="cam" />

<div class="Phone">
    <h1>Hi This is phone</h1>
</div>
<div class="chem">
    <h1>Hi This is chem reaction</h1>
</div>
<div class="cam">
    <h1>Hi This is camera</h1>
</div>

＆＃13;

如何按类名打开特定的div on

2 个答案: