javascript - jQuery 显示/隐藏栏取决于 css 类

Question

我有一个带有删除按钮的动态数量的图像。我第一次单击删除按钮时，图像被选中，顶部出现一个栏。如果我再次单击同一个按钮，图像将被取消选择并且顶部栏应该再次消失。多重选择/删除选择也会发生同样的情况。

我试图通过在单击(选中)时添加一个类并在再次单击时将其删除来实现这一点。

然后我计算类的长度(存在多少)，如果等于 0，顶部栏应该再次消失。

console.log 告诉我它总是计数为 0。

我错过了什么？

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

你应该使用:

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

代替:

var selection = selected.length;

由于表达式 var selected = $('.selected'); 将在没有此类元素时将所有带有所选类的元素保存在 selection 变量中，这就是为什么它将保持计数为零的原因。

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