CODEWITHSUNDEEP
javascriptjquerycss
maxxix
maxxix

Reputation: 1

removeClass and removeClass image not working

Is there an error in siblings('.xx')? Do not want to repeat the image when clicked sorry,My English is so bad :(

$(document).ready(function() {
  //$(".ok").removeClass("imga");
  //$('.ok2').removeClass('imga').siblings('.ok2').addClass("imga");
  $('.item').click(function() {
    var id = $(this).attr('id');
    var xx = "ok" + id;
    $('.ok' + id).removeClass('imga').siblings('.xx').addClass("imga");
    $(this).addClass('active').siblings().removeClass('active');
  });
});
.active {
  font-weight: 900;
  color: blue;
}

.hover {
  color: blue;
}

.imga {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
  margin: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="item" id="1">
  <img class="ok1 imga" src="http://icons.iconarchive.com/icons/ampeross/qetto/128/icon-developer-icon.png"><br> 
  image 1
</div>
<div class="item" id="2" width="50" width="50">
  <img class="ok2 imga" src="http://icons.iconarchive.com/icons/ampeross/qetto/128/icon-developer-icon.png"><br> 
  image 2
</div>
<div class="item" id="3" width="50" width="50">
  <img class="ok3 imga" src="http://icons.iconarchive.com/icons/ampeross/qetto/128/icon-developer-icon.png"><br> 
  image 3
</div>

Upvotes: 0

Views: 63

Answers (3)

Alberto Favaro
Alberto Favaro

Reputation: 1840

$(document).ready(function() {
  $('.item').click(function() {
    var $this = $(this);
    $this.children().removeClass('imga').end().addClass('active');
    $this.siblings().removeClass('active').children('img').addClass('imga');
  });
});
.active {
  font-weight: 900;
  color: blue;
}

.hover {
  color: blue;
}

.imga {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
  margin: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="item" id="1">
  <img class="ok1 imga" src="http://icons.iconarchive.com/icons/ampeross/qetto/128/icon-developer-icon.png"><br> 
  image 1
</div>
<div class="item" id="2" width="50" width="50">
  <img class="ok2 imga" src="http://icons.iconarchive.com/icons/ampeross/qetto/128/icon-developer-icon.png"><br> 
  image 2
</div>
<div class="item" id="3" width="50" width="50">
  <img class="ok3 imga" src="http://icons.iconarchive.com/icons/ampeross/qetto/128/icon-developer-icon.png"><br> 
  image 3
</div>

Upvotes: 0

madalinivascu
madalinivascu

Reputation: 32354

You don't need ids, you just need to add the class to all img and then remove it for the current one

$(document).ready(function() {

  $('.item').click(function() {
    $(this).addClass('active').siblings().removeClass('active');
    $('.item img').addClass('imga');
    $(this).find('img').removeClass('imga');
  });
});
.active {
  font-weight: 900;
  color: blue;
}

.hover {
  color: blue;
}

.imga {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
  margin: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="item" id="1"><img class="ok1 imga" src="http://icons.iconarchive.com/icons/ampeross/qetto/128/icon-developer-icon.png"><br>image 1</div>
<div class="item" id="2" width="50" width="50"><img class="ok2 imga" src="http://icons.iconarchive.com/icons/ampeross/qetto/128/icon-developer-icon.png"><br>image 2</div>
<div class="item" id="3" width="50" width="50"><img class="ok3 imga" src="http://icons.iconarchive.com/icons/ampeross/qetto/128/icon-developer-icon.png"><br>image 3</div>

Upvotes: 0

Christof
Christof

Reputation: 2734

Why not use active class to change image display also?

$('.item').click(function(){  
  $(this).addClass('active').siblings().removeClass('active');
});
.active{
 font-weight:900;
 color:blue;   
}

.item:not(.active) img {
 -webkit-filter: grayscale(1);
 filter: grayscale(1);
 margin:auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="item" id="1"><img class="ok1 imga" src="http://icons.iconarchive.com/icons/ampeross/qetto/128/icon-developer-icon.png"><br>image 1</div>
<div class="item" id="2" width="50" width="50"><img class="ok2 imga" src="http://icons.iconarchive.com/icons/ampeross/qetto/128/icon-developer-icon.png"><br>image 2</div>
<div class="item" id="3" width="50" width="50"><img class="ok3 imga" src="http://icons.iconarchive.com/icons/ampeross/qetto/128/icon-developer-icon.png"><br>image 3</div>

Upvotes: 2

Related Questions