Javascript 如何显示选定的div并隐藏其他同级div？

我希望所有未选中的div都将消失，并仅显示选中的卡。我有不同的卡，它的ID是动态的（默认++），使用循环，并且我添加了一个影响，当使用selectdiv时，它选择了红色边框而不是div

我尝试了不同的方法，当我点击选中的div时，选中的div将保持不变，其余的div将消失

//显示所选卡上的边框
$（'.selects'）。单击（函数（）{
如果（$（'.selects.choice'）。长度>0）{
$（'.choice'）.removeClass（'choice'）；
$（this.addClass（'choice'）；
}否则{
$（this.addClass（'choice'）；
}
});
.card{
保证金：5px；
宽度：140px；
显示：flex！重要；
证明内容：中心；
对齐项目：居中；
}
#操作员图像>图像{
宽度：100px；
高度：50px；
}
.选择{
边框：3px#CA0B00实心；
文字装饰：无；
}
.操作员卡{
光标：指针；
}

阿富汗
埃蒂萨拉特
巴基斯坦
挪威电信
尼吉拉
MTN
阿富汗
埃蒂萨拉特
像这样的东西

var $selects = $('.selects');

$selects.click(function() {
  $selects.not(this).removeClass('choice').hide();
  $(this).addClass('choice');
});

刚刚测试过，效果很好。。。但您必须删除css中的这一重要内容：

display: flex !important;

您可以在兄弟姐妹之间切换，如下所示：


$（'.card body'）。单击（函数（）{
$（'.card body'）。不是（this.hide（）；
});
.card{
保证金：5px；
宽度：140px；
显示：flex！重要；
证明内容：中心；
对齐项目：居中；
}
#操作员图像>图像{
宽度：100px；
高度：50px；
}
.选择{
边框：3px#CA0B00实心；
文字装饰：无；
}
.操作员卡{
光标：指针；
}

阿富汗
埃蒂萨拉特
巴基斯坦
挪威电信
不明白。。。当用户单击并希望其他卡消失时，选择将影响所选div。如果我将display:none添加到choice类中，那么它将隐藏choice类而不是其他它对方法有效这只是添加choice类，但其他div仍在那里我希望所选div将显示并取消同级显示是的我更新了我的答案。。。您不应该使用display:flex！重要的；这就是为什么它们仍然可见。重要信息覆盖jquery的css。不要使用重要的。。。