Question

丢失了我的上一个帐户，所以我必须创建新帐户，但再次为所有人打个招呼。

我有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等......），当我选择一个时我想要 - ＆gt;信息显示。但当我点击另一个前。 trener_2信息与类trener_2显示但从trener_1消失。

我的js：

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

抱歉我的英语不好，任何建议都会非常有用。

Answer 1

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

＆＃13;

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

＆＃13;

.choose_info {
  background-color: lightgrey;
}

＆＃13;

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

＆＃13;

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

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

1 个答案: