當我單擊其他div時使div出現

Question

我有五個不同的div，其類別為“ avatar”，當我單擊其中的一個時，我希望相應的帶有“ iframe”類別的部分出現。 到目前為止，我只能創建一個函數，當我單擊帶有“ avatar”類的div時，將添加.open類，從而導致出現類.iframe的部分。 但是總是彈出相同的部分。

的HTML

<div class="avatar" id="mauricioAvatar">
    <img src="img/mauricio.jpg" alt="">
    <span class="avatar-info"><p><strong>Maurício Munhoz</strong><br/>
    Diretor/Consultor Técnico</p>
    </span>
</div>
<div class="avatar" id="alexandreAvatar">
   <img src="img/alexandre.jpeg" alt="">
    <span class="avatar-info"><p><strong>Alexandre Lúcio da Silva</strong><br/>
    Consultor Lean Manufacturing</p>
    </span>
</div>
<div class="avatar" id="pauloAvatar">
    <img src="img/paulo.jpg" alt="">
    <span class="avatar-info"><p><strong>Paulo Fernandes da Costa</strong><br/>
    Consultor Técnico</p>
    </span>
</div>
<div class="avatar" id="amauriAvatar">
    <img src="img/amauri.png" alt="">
    <span class="avatar-info"><p><strong>Amauri Chillemi</strong><br/>
    Consultor Técnico</p>
    </span>
</div>
<div class="avatar" id="julianoAvatar">
    <img src="img/juliano.jpg" alt="">
    <span class="avatar-info"><p><strong>Juliano Eibel</strong><br/>
    Desenvolvedor Front-End</p>
    </span>
</div>

應顯示的部分

<section class="iframe">
    <div class="iframe_avatar">
        <img src="img/mauricio.jpg" alt="">
    </div>
    <div class="iframe_info">
       <span class="iframe_close">&times;</span>
        <p><strong>Maurício Munhoz</strong><br/>
                Diretor/Consultor Técnico</p>
        <p>Formado em Engenharia Industrial pela Universidade Braz Cubas de Moji das Cruzes - SP. Antes de fundar a Munhoz Consultoria, Maurício atuou como Engenheiro e Supervisor da Qualidade na Valeo Sistemas Automotivos Ltda, com a coordenação de equipes de técnicos e engenheiros, planejamento de atividades, tratamento de não conformidades, planejamento e gerenciamento de custos e investimentos da área da qualidade, negociação em compras e aprovação de projetos. </p>
    </div>
</section>
<section class="iframe">
    <div class="iframe_avatar">
        <img src="img/alexandre.jpeg" alt="">
    </div>
    <div class="iframe_info">
       <span class="iframe_close">&times;</span>
        <p><strong>Alexandre Lúcio da Silva</strong><br/>
                Diretor/Consultor Técnico</p>
        <p>Formado em Engenharia Industrial pela Universidade Braz Cubas de Moji das Cruzes - SP. Antes de fundar a Munhoz Consultoria, Maurício atuou como Engenheiro e Supervisor da Qualidade na Valeo Sistemas Automotivos Ltda, com a coordenação de equipes de técnicos e engenheiros, planejamento de atividades, tratamento de não conformidades, planejamento e gerenciamento de custos e investimentos da área da qualidade, negociação em compras e aprovação de projetos. </p>
    </div>
</section>

JS

$(".avatar").click(function() {
   $('.iframe').addClass('open');
});

Answer 1

當您要打開相應的iframe類部分時，請同時使用.index（）和.eq（）

$(".avatar").click(function() { // index
   $('.iframe').eq($(this).index()).addClass('open'); // matched index
});

Answer 2

使用div類的索引打開將有所幫助。 https://api.jquery.com/index/

ex-使用“ .index（）”獲取iframe /類的索引，然后比較索引是否匹配，然后添加打開的類。 請參閱jquery索引文檔。

Answer 3

html

<section id="iframe_0" class="iframe"></section>
<section id="iframe_1" class="iframe hidden"></section>
<section id="iframe_2" class="iframe hidden"></section>

的CSS

.hidden {
    display: none;
}

js

$(".avatar").on('click', function() {
    var i = 2;

    $('.iframe').addClass("hidden");
    $('#iframe_' + i).removeClass("hidden");
}