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>

Answer 2

您可以为要影响的div声明一个变量，然后使用jquery find选项仅获取嵌套的div。

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

  $('.item').removeClass('active');
  
  //Delcare variable as jquery object and just get the closest div
  var $imageDiv = $el.find('.imagem');
  $imageDiv.fadeOut(500);

  if (!isActive) {
    $el.addClass('active');
    $imageDiv.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>

如何只显示同一个班级的一个div，然后显示其他班级

2 个答案: