带有复选框标签的ToggleClass

Question

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

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

下面是一个快速的jsfiddle示例：http://jsfiddle.net/vvvRX/

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

我必须为每一个都做一条if语句而不是$(this)吗？

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

谢谢。

Answer 1

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

如果您希望图标在单击时更改，您可以创建一个单独的div来显示图标。

CSS：

.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;
}

HTML：

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

下面是一个有效的示例：http://jsfiddle.net/f8hVn/2/

您似乎还混淆了id和class的概念。id应该是唯一的-如果您需要区分同一class的不同对象，则应使用id。class是您应该分配给多个希望外观相同的对象的对象。对象可以有多个class，但只能有一个id。

在本例中，您应该为项之间共享的所有位和背景使用class。你应该为图标使用一个id，每个项目需要不同的图标。

Answer 2

好吧..。首先，您需要一个白色图标:)

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

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

活生生的例子：http://jsfiddle.net/vvvRX/1/ (用于第二个按钮)

另外，要小心，您不止一次使用了id padding ...它应该是一个类。

更新

如果你想同时保留这两种背景，那么你就有麻烦了。您需要使用:before或:after属性、which are not supported by older versions of many browsers.

标签的相对位置: label { color:#40403e；background:#dbdcd4；position: relative；}

和具有新背景的: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%;
}

活的例子：http://jsfiddle.net/vvvRX/3/

更新2

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

好吧，我不会向你解释所有的事情，但只看一看事情应该是如何做的：

http://jsfiddle.net/vvvRX/4/