Javascript jQuery根据css类显示/隐藏栏

我有一个带有删除按钮的动态图像数。第一次单击“删除”按钮时，图像被选中，顶部出现一个条形图。如果我再次单击同一按钮，图像将被取消选中，顶部栏将再次消失。多个选择/删除选择时也应如此

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

然后我计算类的长度（存在多少个），如果等于0，顶部的条应该再次消失

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

我错过了什么

var bar=$（'#bar'）；
var deleteBtn=$（'.delete'）；
所选变量=$（'.selected'）；
var选择=0；
deleteBtn.单击（函数（）{
if（$（this）.hasClass（“选定”））{
$（此）.removeClass（“选定”）；
}否则{
$（此）.addClass（“选定”）；
}
var selection=selected.length；
if（bar.hasClass（“隐藏”））{
bar.addClass（“展会”）；
}否则{
如果（选择===0）{
bar.removeClass（“barShowY”）；
}
}
console.log（选择+所选图像）；
});
#条{
高度：100px；
宽度：100%；
背景颜色：耐火砖；
颜色：白色；
}
.隐藏{
利润上限：-100px；
}
.表演{
边际上限：0；
}
.删除{
宽度：50px；
高度：50px；
背景：黄色；
光标：指针；
}
.选定{
底部边框：3倍纯红；
}

是否删除选定的图像？
删除
删除
删除
您应该使用：

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

而不是：

var selection = selected.length;

因为表达式
var selected=$（'.selected'）将在
selection
变量中保存所选类的所有元素，这就是为什么它将保持计数为零的原因


var bar=$（'#bar'）；
var deleteBtn=$（'.delete'）；
var选择=0；
deleteBtn.单击（函数（）{
if（$（this）.hasClass（“选定”））{
$（此）.removeClass（“选定”）；
}否则{
$（此）.addClass（“选定”）；
}
变量选择=$（'.selected'）。长度；
if（bar.hasClass（“隐藏”））{
bar.addClass（“展会”）；
}否则{
如果（选择===0）{
bar.removeClass（“barShowY”）；
}
}
console.log（选择+所选图像）；
});
#条{
高度：100px；
宽度：100%；
背景颜色：耐火砖；
颜色：白色；
}
.隐藏{
利润上限：-100px；
}
.表演{
边际上限：0；
}
.删除{
宽度：50px；
高度：50px；
背景：黄色；
光标：指针；
}
.选定{
底部边框：3倍纯红；
}

是否删除选定的图像？
删除
删除
删除
您选择的是
。选择的
类在将该类应用于导致错误的主要元素之前，请将其移动到“删除”按钮内，如下所示


var bar=$（'#bar'）；
var deleteBtn=$（'.delete'）；
var选择=0；
$（文档）.ready（函数（）{
deleteBtn.on（'单击'，函数（））{
console.log（$（'.selected'）.length）；
if（$（this）.hasClass（“选定”））{
$（此）.removeClass（“选定”）；
}否则{
$（此）.addClass（“选定”）；
}
变量选择=$（'.selected'）。长度；
if（bar.hasClass（“隐藏”））{
bar.addClass（“展会”）；
}否则{
如果（选择===0）{
bar.removeClass（“barShowY”）；
}
}
console.log（选择+所选图像）；
});
})
#条{
高度：100px；
宽度：100%；
背景颜色：耐火砖；
颜色：白色；
}
.隐藏{
利润上限：-100px；
}
.表演{
边际上限：0；
}
.删除{
宽度：50px；
高度：50px；
背景：黄色；
光标：指针；
}
.选定{
底部边框：3倍纯红；
}

是否删除选定的图像？
删除
删除
删除
我已经修改了以下内容，似乎得到了您期望的结果

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

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

barShowY
应该只是
show

Codepen here:
选中的
应在事件处理程序中声明。这应该是您的JS文件：

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");
});

在代码笔中查看它

或者在JSBin上收集文档首次加载时所选图像的数量。因此，由于缓存，您将始终获得相同的数字（0）。您必须在每次单击时重新获取金额，以便它可以实时更新


var bar=$（'#bar'）；
var deleteBtn=$（'.delete'）；
deleteBtn.单击（函数（）{
选择var；
$（this.toggleClass（'selected'）；
选定=$（'.selected'）。长度；
如果（！已选定）{
bar.removeClass（'show'）；
}否则{
bar.addClass（'show'）；
}
log（$（'.selected'）.length+“selected image”）；
});
#条{
高度：100px；
宽度：100%；
背景颜色：耐火砖；
颜色：白色；
}
.隐藏{
利润上限：-100px；
}
.表演{
边际上限：0；
}
.删除{
宽度：50px；
高度：50px；
背景：黄色；
光标：指针；
}
.选定{
底部边框：3倍纯红；
}

是否删除选定的图像？
删除
删除
删除
添加和删除类的逻辑需要重新思考。条形图始终使用
var selection=$（选定）具有类隐藏看看我的答案。你是对的charlietfl，这是工作的js位：var bar=$（'#bar'）；var deleteBtn=$（'.delete'）；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”）；bar.removeClass（“hide”）；}else{if（selection==0）{bar.removeClass（“show”）；bar.addClass（“隐藏”）；}}；您应该删除
var selected=$（'.selected'）的初始化
从delete函数外部到内部或完全删除。我们根本不需要它@MuhammadOmerAslamyeah我们不需要它。非常感谢Zakaria Acharki，正如charlietfl指出的，隐藏/显示逻辑也有一个小问题，这是最终的js，所以