更新

Question

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

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

这是一个快速的jsfiddle，例如：http://jsfiddle.net/vvvRX/

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

我是否必须为每一个而不是$(this)执行if语句？

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

感谢。

Answer 1

嗯......首先你需要一个白色图标：）

然后只为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.

标签的相对位置：标签 { 颜色：＃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%;
}

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

更新2

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

好吧，我不会向你解释一切，只是看看应该怎么做：

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

Answer 2

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

如果要在点击时更改图标，可以创建一个单独的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应该是唯一的 - 如果您需要区分同一id的不同对象，则可以使用class。 class是您应该分配给想要看起来相同的多个对象的东西。对象可以有多个class，但只有一个id。

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

带复选框标签的ToggleClass

2 个答案:

更新

更新2