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

jQuery adding info when click current element

本文关键字：添加 信息 元素 单击 jQuery      更新时间：2023-11-02

失去了我的最后一个帐户，所以我必须创建新帐户，但再次嗨。

我有6个div的列表，其中一个是这样的：

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

当点击具有特定id的图时，会显示具有相同类的元素。现在我有六个类似的元素（trener_2，trener_3等），当我选择一个-->信息显示时，我想要。但当我点击另一个前trener_2时，类为trener_2的trener_2信息显示，但从trener_1消失。

我的js:

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

很抱歉我的英语不好，任何建议都会很有帮助。

您可以隐藏除当前元素之外的所有choose_info元素，以便

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

为什么不将类trener_3分配给div.row元素？

相关文章：