Jquery 如何识别已单击的“span”以更改其css属性？

我有一组

span

标签（用于色块），在每个标签内，我还有另一个

span标签（用于图标）。单击其中一种颜色后，我想将图标的
css
属性从
display:none
更改为
display:block
。当其中一个图标具有
display:block
时，其余图标应隐藏

为了更好地理解我的意思

以下是我在步骤中的意思：

应单击
颜色的span/block

单击其中一个按钮时，应显示
图标

单击另一种颜色时，应显示图标，但应隐藏以前显示的图标

您可以在以下情况下使用简单jquery：

使用id选择器选择标签标签以及每个颜色div

<div id="label"></div>
<div id="red"></div>



然后在jquery中：

<script>
    $("#red").click(function(){
   $("#label").css("background-color","red");
})

</script>


$（“#红色”）。单击（函数（）{
$（“#标签”）.css（“背景色”、“红色”）；
})
您应该更改
$（“.colors”）。单击（function（）{
处理程序到
$（文档）。在（'click'，'.colors'，function（）{
上，在单击事件中显示/隐藏逻辑：

$(document).on('click', '.colors', function(){
  //display "fa fa-check" on the clicked div and hide it on the rest
  $('.fa.fa-check').hide();
  $('.fa.fa-check', $(this)).show();
});

您可以选择一种更简单的纯CSS解决方案，添加单选按钮，使用标签代替颜色的跨度，然后切换选中选项的可见性

    .fa.fa-check{
        visibility: hidden;
        color:white;
        padding-top: 8px; 
        padding-left:14px;
        font-size:15px;
    }
.colors{
        cursor:pointer;
        width:42px; 
        height:30px;
        margin-right:3px;
        border-radius:3px; 
        display:inline-block;
    }

.option{display:none;}

.option:checked + label span{
  visibility: visible;
}

寻求调试帮助的问题（“为什么此代码不起作用？”）必须包含所需的行为和在问题本身中复制它所需的最短代码。请参阅：.99%的时间您的外部文件
和
只需加载一次。您有两个引导副本和两个版本的jQuery。您应该真正阅读教程。同意@zer00neso我应该使用if-else或switCH情况下，只显示div中的图标？Hi@ Shanjaa.如果这已经解决了你的问题，请考虑通过点击复选标记接受它。没有义务这样做。