点击其他div

Question

我有五个不同的div与类'avatar'，当我点击其中一个时，我想要出现带有'iframe'类的相应部分。到目前为止，我只能创建一个函数，当我点击带有“avatar”类的div时，会添加.open类，导致出现classse .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

如果您想打开相应的import UIKit class ViewController: UIViewController { @IBOutlet weak var photoImageView: UIImageView! // Create a place to render the filtered image let context = CIContext(options: nil) @IBAction func applyFilter(sender: AnyObject) { // Create an image to filter let inputImage = CIImage(image: photoImageView.image) // Create a random color to pass to a filter let randomColor = [kCIInputAngleKey: (Double(arc4random_uniform(314)) / 100)] // Apply a filter to the image let filteredImage = inputImage.imageByApplyingFilter("CIHueAdjust", withInputParameters: randomColor) // Render the filtered image let renderedImage = context.createCGImage(filteredImage, fromRect: filteredImage.extent()) // Reflect the change back in the interface photoImageView.image = UIImage(CGImage: renderedImage) } override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view, typically from a nib. } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() // Dispose of any resources that can be recreated. } } 课程部分，请使用.index()以及.eq()

iframe

Answer 2

使用div类的索引打开会有所帮助。 https://api.jquery.com/index/

ex - 使用“.index（）”获取iframe / class的索引，然后比较索引是否匹配，然后将类添加为open。请参阅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");
}