Melvin Melvin - 9 months ago 76
HTML Question

jQuery show/hide bar depending on css class

I have a dynamic number of images with a delete button. the first time i click a delete button the image is selected and a bar at the top appears. if i click the same button again, the image is unselected and the top bar should disappear again. the same should happen with multiple selections /removals of selection.

I tried to achieve this by adding a class on click (selected) and removing it when clicked again.

I then count the the length of the class (how many exist) and if equals 0, the top bar should disappear again.

the console.log shows me that it always counts 0.

what am i missing?



var bar = $('#bar');
var deleteBtn = $('.delete');
var selected = $('.selected');
var selection = 0;



deleteBtn.click(function() {

if ($(this).hasClass("selected")) {
$(this).removeClass("selected");
} else {
$(this).addClass("selected");
}

var selection = selected.length;

if (bar.hasClass("hide")) {
bar.addClass("show");
} else {
if (selection === 0) {
bar.removeClass("barShowY");
}
}
console.log(selection + " selected images");

});

#bar {
height: 100px;
width: 100%;
background-color: firebrick;
color: white;
}

.hide {
margin-top: -100px;
}

.show {
margin-top: 0;
}

.delete {
width: 50px;
height: 50px;
background: yellow;
cursor: pointer;
}

.selected {
border-bottom: 3px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bar" class="hide">delete selected images?</div>

<div class="delete">delete</div>
<img src="https://apollo2.dl.playstation.net/cdn/UP2131/CUSA01736_00/Ll2fJdBTPQylZO0Z4JQ9rtsIJsojwBxn.png" alt="">

<div class="delete">delete</div>
<img src="https://apollo2.dl.playstation.net/cdn/UP2131/CUSA01736_00/lYG2Mgzz878Z8rU3yvlx9MwmR5dhDsyy.png" alt="">

<div class="delete">delete</div>
<img src="https://apollo2.dl.playstation.net/cdn/UP2131/CUSA01736_00/Zp2VXCJxT764bqDPyyIy0Yf2ZRFHzr3g.png" alt="">




Answer Source

You should use :

 var selection = $('.selected').length;

Instead of :

var selection = selected.length;

Since the expression var selected = $('.selected'); will save all the elements with selected class in selection variable when there's no elements with this class, that why i'll remain with count zero.

Hope this helps.

var bar = $('#bar');
var deleteBtn = $('.delete');
var selection = 0;

deleteBtn.click(function() {

  if ($(this).hasClass("selected")) {
    $(this).removeClass("selected");
  } else {
    $(this).addClass("selected");
  }

  var selection = $('.selected').length;

  if (bar.hasClass("hide")) {
    bar.addClass("show");
  } else {
    if (selection === 0) {
      bar.removeClass("barShowY");
    }
  }
  console.log(selection + " selected images");

});
#bar {
  height: 100px;
  width: 100%;
  background-color: firebrick;
  color: white;
}

.hide {
  margin-top: -100px;
}

.show {
  margin-top: 0;
}

.delete {
  width: 50px;
  height: 50px;
  background: yellow;
  cursor: pointer;
}

.selected {
  border-bottom: 3px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bar" class="hide">delete selected images?</div>

<div class="delete">delete</div>
<img src="https://apollo2.dl.playstation.net/cdn/UP2131/CUSA01736_00/Ll2fJdBTPQylZO0Z4JQ9rtsIJsojwBxn.png" alt="">

<div class="delete">delete</div>
<img src="https://apollo2.dl.playstation.net/cdn/UP2131/CUSA01736_00/lYG2Mgzz878Z8rU3yvlx9MwmR5dhDsyy.png" alt="">

<div class="delete">delete</div>
<img src="https://apollo2.dl.playstation.net/cdn/UP2131/CUSA01736_00/Zp2VXCJxT764bqDPyyIy0Yf2ZRFHzr3g.png" alt="">

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download