单击当前元素时jQuery添加信息

Question

Lost my last account so I must create new but again Hi for all.

I have list of 6 divs, one like this:

<figure id="trener_1">
          <img class="img-responsive center" src="<?php bloginfo('template_directory'); ?>/img/ex_wybierz_trenera1.jpg" alt="">
          <figcaption>
            <h4>Kasia Kowalska</h4>
          </figcaption>
          <a><div class="click_to text-center">
            <i class="fa fa-plus"></i>
            <p>Kliknij aby wybrać trenera</p>
          </div></a>
        </figure>
        <section class="row">
          <div class="col-sm-6 xs-p-top">
            <div class="choose_info trener_1" style="display:none;">
              <img class="pull-left" src="<?php bloginfo('template_directory'); ?>/img/check_trener.png" alt="">
              <p class="pull-left small-m-left xs-m-top text-bold">Wybrano trenera</p>
            </div>
          </div>
          <div class="col-sm-6">
            <a href="szczegoly-trenera" target="_blank"><h3 class="btn-custom_bg pull-right">Zobacz profil trenera</h3></a>
          </div>
        </section>

And when clicking on figure with specific id, the element with the same class show. Now I have six elements like this (trener_2, trener_3 etc..) and I want when I choose one --> info shows. But when I click another ex. trener_2 info with class trener_2 shows but from trener_1 disappear.

My js:

$(function() {
            $('figure').click(function() {
                $("." + $(this).attr('id')).fadeIn('slow').siblings().hide();
            });
        });

Sorry for my bad English, any suggest will be very helpful.

Answer 1

You can hide all the choose_info elements except the current one so

 $(function() { $('figure').click(function() { var $t = $("." + $(this).attr('id')).fadeIn('slow'); $t.siblings().hide(); $('.choose_info').not($t).hide().siblings().show() }); }); 

 .choose_info { background-color: lightgrey; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <figure id="trener_1"> <img class="img-responsive center" src="<?php bloginfo('template_directory'); ?>/img/ex_wybierz_trenera1.jpg" alt=""> <figcaption> <h4>Kasia Kowalska</h4> </figcaption> <a> <div class="click_to text-center"> <i class="fa fa-plus"></i> <p>Kliknij aby wybrać trenera</p> </div> </a> </figure> <section class="row"> <div class="col-sm-6 xs-p-top"> <div class="choose_info trener_1" style="display:none;"> <img class="pull-left" src="<?php bloginfo('template_directory'); ?>/img/check_trener.png" alt=""> <p class="pull-left small-m-left xs-m-top text-bold">Wybrano trenera</p> </div> </div> <div class="col-sm-6"> <a href="szczegoly-trenera" target="_blank"><h3 class="btn-custom_bg pull-right">Zobacz profil trenera</h3></a> </div> </section> <figure id="trener_2"> <img class="img-responsive center" src="<?php bloginfo('template_directory'); ?>/img/ex_wybierz_trenera1.jpg" alt=""> <figcaption> <h4>Kasia Kowalska</h4> </figcaption> <a> <div class="click_to text-center"> <i class="fa fa-plus"></i> <p>Kliknij aby wybrać trenera</p> </div> </a> </figure> <section class="row"> <div class="col-sm-6 xs-p-top"> <div class="choose_info trener_2" style="display:none;"> <img class="pull-left" src="<?php bloginfo('template_directory'); ?>/img/check_trener.png" alt=""> <p class="pull-left small-m-left xs-m-top text-bold">Wybrano trenera</p> </div> </div> <div class="col-sm-6"> <a href="szczegoly-trenera" target="_blank"><h3 class="btn-custom_bg pull-right">Zobacz profil trenera</h3></a> </div> </section> <figure id="trener_3"> <img class="img-responsive center" src="<?php bloginfo('template_directory'); ?>/img/ex_wybierz_trenera1.jpg" alt=""> <figcaption> <h4>Kasia Kowalska</h4> </figcaption> <a> <div class="click_to text-center"> <i class="fa fa-plus"></i> <p>Kliknij aby wybrać trenera</p> </div> </a> </figure> <section class="row"> <div class="col-sm-6 xs-p-top"> <div class="choose_info trener_3" style="display:none;"> <img class="pull-left" src="<?php bloginfo('template_directory'); ?>/img/check_trener.png" alt=""> <p class="pull-left small-m-left xs-m-top text-bold">Wybrano trenera</p> </div> </div> <div class="col-sm-6"> <a href="szczegoly-trenera" target="_blank"><h3 class="btn-custom_bg pull-right">Zobacz profil trenera</h3></a> </div> </section> 

Why not assign the class trener_3 to the div.row element?