jQuery显示/隐藏栏取决于CSS类

Question

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 1

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 it'll remain with count zero.

 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=""> 

Answer 2

you are selecting the .selected class before applying the class on the element that is the main cause of error, move it inside the delete button see below

 var bar = $('#bar'); var deleteBtn = $('.delete'); var selection = 0; $(document).ready(function() { deleteBtn.on('click', function() { console.log($('.selected').length); 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 3

I've modified the following and I seem to be getting the results you're expecting

var selection = $('.selected').length;
if (bar.hasClass("hide")) {
  bar.removeClass("hide");
  bar.addClass("show");
} else {

  if (selection === 0) {
     bar.removeClass("show");
     bar.addClass("hide");
  }
}

Was barShowY supposed to be just show ?

Codepen here : https://codepen.io/anon/pen/dZQNxM

Answer 4

selected should be declared in the event handler. This should be your JS file:

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

deleteBtn.click(function() {

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

  var selected = $('.selected'); // Note these two lines
  var selection = selected.length;

  if (bar.hasClass("hide")) {
    bar.addClass("show");
  } else {
    if (selection === 0) {
      bar.removeClass("barShowY");
    }
  }

  console.log(selection + " selected images");
});

Check it out in CodePen https://codepen.io/anon/pen/zPMNeX?editors=1111
or on JSBin http://jsbin.com/cifekojasu/edit?js,console,output

Answer 5

Your collecting the amount of selected images when the document first loads. Therefore you'll always get the same number (0) due to caching. You'll have to recapture the amount on every click so it can live update.

 var bar = $('#bar'); var deleteBtn = $('.delete'); deleteBtn.click(function() { var selected; $(this).toggleClass('selected'); selected = $('.selected').length; if (!selected) { bar.removeClass('show'); } else { bar.addClass('show'); } console.log($('.selected').length + " 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="">