jQuery Hinzufügen von Informationen, wenn klicken Sie auf das aktuelle Element

Question

Verlor mein letztes Konto, so muss ich neu erstellen, aber wieder Hallo für alle.

Ich habe Liste von 6 divs, ein wie folgt aus:

<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> 

Und wenn auf Figur mit spezifischen ID klicken, wird das Element mit der gleichen Klasse zeigen. Jetzt habe ich sechs Elemente wie dieses (trener_2, trener_3 usw ..) und ich möchte, wenn ich eins wähle -> info zeigt. Aber wenn ich einen anderen Ex klicke. trener_2 info mit class trener_2 zeigt aber von trener_1 verschwinden.

Meine js:

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

Sorry für mein schlechtes Englisch, deuten darauf hin, jede wird sehr hilfreich sein.

Answer 1

Sie verstecken können alle choose_info Elemente mit Ausnahme der aktuellen 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>

Warum die Klasse trener_3 zum div.row Element nicht zuordnen?