javascript - 如何只显示一个具有相同类别的div，然后显示其他div

Question

我正在创建一个车库系统，当我的用户单击所选项目时，我希望显示它的汽车图片。然而，包含图像的 div 都具有相同的类名，因此所有汽车都会显示。

我试图仅显示所选项目(事件)中的 class="imagem"，而不是全部。

$(document).on('click', '.item', function() {
  let $el = $(this);
  let isActive = $el.hasClass('active');

  $('.item').removeClass('active');
  $('.imagem').fadeOut(500);

  if (!isActive) {
    $el.addClass('active');
    $('.imagem').fadeIn(500);
  }

});

.imagem {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="title">
  <h1>GARAGE</h1>
</div>
<div id="subtitle">
  <span class="sub1">MODEL: </span>
  <span class="sub2">DOCUMENTS:</span>
  <span class="sub3">PRICE:</span>
  </br>
</div>
<div class="item" data-item-name="bugatti">
  <div id="itemname">Bugatti</div>
  <div id="itemqtd">Indeed</div>
  <div id="itempeso">$ 320.100</div>
  <div class="imagem">
    <img style="max-width: 100%; max-height: 132px;" src="http://177.54.152.85/imgallstar/bugatti.png" />
    <div class="status">
      <span class="stat1">Motor: </span><span class="stat2">100%</span></br>
      <span class="stat1">Chassis: </span><span class="stat2">100%</span></br>
      <span class="stat1">Fuel: </span><span class="stat2">10%</span></br>
    </div>
  </div>
</div>
<div class="item" data-item-name="another">
  <div id="itemname">Another Car</div>
  <div id="itemqtd">Indeed</div>
  <div id="itempeso">$ 20.000</div>
  <div class="imagem">
    <img style="max-width: 100%; max-height: 132px;" src="http://177.54.152.85/imgallstar/another.png" />
    <div class="status">
      <span class="stat1">Motor: </span><span class="stat2">100%</span></br>
      <span class="stat1">Chassis: </span><span class="stat2">100%</span></br>
      <span class="stat1">Fuel: </span><span class="stat2">100%</span></br>
    </div>
  </div>
</div>

Answer 1

$('.imagem')` 将始终返回页面上的所有可用元素。

您必须通过 find 从其父类中找到 .imagem 类.

$(document).on('click', '.item', function() {
  let $el = $(this);
  let isActive = $el.hasClass('active');

  $('.item').removeClass('active');
  $el.find('.imagem').fadeOut(500);

  if (!isActive) {
    $el.addClass('active');
    $el.find('.imagem').fadeIn(500);
  }

});

.imagem {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="title">
  <h1>GARAGE</h1>
</div>
<div id="subtitle">
  <span class="sub1">MODEL: </span>
  <span class="sub2">DOCUMENTS:</span>
  <span class="sub3">PRICE:</span>
  </br>
</div>
<div class="item" data-item-name="bugatti">
  <div id="itemname">Bugatti</div>
  <div id="itemqtd">Indeed</div>
  <div id="itempeso">$ 320.100</div>
  <div class="imagem">
    <img style="max-width: 100%; max-height: 132px;" src="http://177.54.152.85/imgallstar/bugatti.png" />
    <div class="status">
      <span class="stat1">Motor: </span><span class="stat2">100%</span></br>
      <span class="stat1">Chassis: </span><span class="stat2">100%</span></br>
      <span class="stat1">Fuel: </span><span class="stat2">10%</span></br>
    </div>
  </div>
</div>
<div class="item" data-item-name="another">
  <div id="itemname">Another Car</div>
  <div id="itemqtd">Indeed</div>
  <div id="itempeso">$ 20.000</div>
  <div class="imagem">
    <img style="max-width: 100%; max-height: 132px;" src="http://177.54.152.85/imgallstar/another.png" />
    <div class="status">
      <span class="stat1">Motor: </span><span class="stat2">100%</span></br>
      <span class="stat1">Chassis: </span><span class="stat2">100%</span></br>
      <span class="stat1">Fuel: </span><span class="stat2">100%</span></br>
    </div>
  </div>
</div>