CODEWITHSUNDEEP
javascriptjqueryhtml
Emilly Monteiro de Souza
Emilly Monteiro de Souza

Reputation: 115

How to show only one div with same class then others

I'm creating a garage system and when my user clicks on a selected item, I wish to show the car picture for it. However the divs that contain the images all have the same class name, so all cars are showing up.

I'm trying to show only the class="imagem" from the selected item (active) not all.

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

Upvotes: 1

Views: 99

Answers (2)

MUlferts
MUlferts

Reputation: 1330

You could declare a variable for the div you want to affect and then use the jquery find option to just get the nested 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>

Upvotes: 0

oktapodia
oktapodia

Reputation: 1748

$('.imagem')` will always return you all the available elements on the page.

You have to find the .imagem class from its parent with find.

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

Upvotes: 3

Related Questions