Jquery 使用复选框标签切换类

我有一个标签列表，当单击时，jQuery会打开和关闭类

在每个标签上，都会有一个不同的图标，与它用黑色表示的内容相关。当类被激活表示它已被选中时，标签上会覆盖一个灰色箭头。我需要的是将图标从黑色改为白色，这就是我遇到问题的地方

下面是一个快速的JSFIDLE示例：

在我的jQuery切换中，它切换名为active的活动类，但这是一个打开了纯灰色箭头的类，如何让它为每个标签显示灰色箭头和白色图标

我是否需要为每一个执行if语句而不是

$（this）

似乎有太多的div和类浮动，所以我知道必须有一个解决方案

---

谢谢。

嗯。。。您首先需要一个白色图标：）

然后只需为激活状态添加以下样式：

.university.active{ 
    color:white; 
    margin-left:-12px;
    background: url('URL_WITH_WHITE_ICON') 210px center no-repeat;  
}

实例：（用于第二个按钮）

另外，请注意，您不止一次使用id

padding

。。。这应该是一门课

更新 如果你想同时保持两种背景，那么你就有麻烦了。您需要使用

：before

或

：after

属性

相对于标签的位置： 标签{ 颜色：#40403e； 背景：#dbdcd4； 位置：相对位置； }

以及新背景下的

：after

样式：

.university.active:after{ 
    content:'';
    position: absolute;
    z-index:3;
    color:white; 
    right:-12px;
    top:-2px;
    background: url('http://www.maxwellplan.com/fw/img/university-check-icon-white.png') 210px center no-repeat ;   
    width:100%;
    height:100%;
}

活生生的例子：

更新2

---

您的主要问题是HTML代码。如果你能正确地创建它，它会简单得多。例如，为项目使用列表，并为右侧的图标添加span元素。然后，您可以分别使用活动状态的列表背景或范围背景

好吧，我不会向你解释所有的事情，只是看看应该怎么做：

---

不能将对象的背景设置为两个不同的图像

如果要在单击时更改图标，可以创建单独的div来显示图标

CSS:

HTML:

大学

以下是一个工作示例：

您似乎还混淆了

id

和

class

的概念。

id

应该是唯一的-如果需要区分同一

类的不同对象，可以使用
id
。一个
类
应该分配给多个要看起来相同的对象。对象可以有多个
类
，但只能有一个
id

在本例中，您应该为项目之间共享的所有位和背景使用
类。对于每个项目需要不同的图标，您应该使用
id
。
您能重新表述例外问题吗？我不明白你想要实现什么。你的图标在哪里？你在说什么灰色箭头？我在你的提琴上都没有看到。是的，我肯定会更新我的JSFIDDLE。你的提琴在IE10上根本不起作用。我相信你的问题是，你试图同时为标签设置两种不同的背景。如果您需要在
#school
处于活动状态时使用不同的CSS选择器，则可以将这两个选项组合在一起，如
#school.active
。（而
#school
会选择非活动版本。）点击这里，点击我的链接即可！我唯一的问题是我需要灰色箭头，比如顶部的箭头和白色图标。我可以得到一块彩色工作，但不是灰色箭头图像和白色图标与他们是两个图像。谢谢你的耐心谢谢你的帮助。。嗯，我想知道是否有一种方法可以在jQuery中执行if语句，而不是使用：之后，我将研究这个！您的主要问题是HTML代码。如果你能正确地创建它，它会简单得多。例如，使用项目列表并为右侧图标添加
span
元素。然后，您可以分别使用列表背景或span背景来显示
活动状态。看看一些合适的网站，你会意识到这些事情通常是如何完成的。我之所以这样做，是因为它是在谷歌地图中实现的，可以切换标记和标签。如果我不清楚我的问题，很抱歉…这很有意义，我感谢id和类，我已经更改了很多次了-是的，我的代码在更新后很混乱，一旦应用，我将更新我的JSFIDLE，以便您可以看到一个工作示例。谢谢这里唯一的问题是点击该div不会像标签通常那样自动选中或取消选中复选框。我更新了代码，但是有点乱。除非您需要实际的复选框，否则您应该使用类或JavaScript对象跟踪对象的状态。我还建议您检查符号/图标字体。您可以为图标使用字体，并使其随文本自动更改颜色。有关示例，请参见。
.labelItem .icon {
    margin-top: -6px;
    margin-right: 15px;
    float: right;
    width: 30px;
    height: 30px;
}

#iconUniversity {
    background: url('http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/32/Business-Graduation-cap-icon.png') no-repeat;
}

.active #iconUniversity {
    background: url('http://www.maxwellplan.com/fw/img/university-check-icon-white.png') no-repeat;
}

    <input type="checkbox" id="university" class="checkbox" />
    <div class="labelItem">
        <label for="university">University</label>
        <div id="iconUniversity" class="icon">&nbsp;</div>
    </div>