0

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

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

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

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

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

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

谢谢。

4

2 回答 2

1

嗯......你首先需要一个白色图标:)

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

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

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

另外，请注意，您padding不止一次使用 id ......它应该是一个类。

更新

如果你想同时保留两个背景，那么你就有麻烦了。您需要使用:before或:after属性，许多旧版本的浏览器不支持这些属性。

标签的相对位置： label { color:#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/

于 2013-07-02T14:49:47.807 回答
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应该是唯一的 -如果id您需要区分相同的不同对象，您将使用class。Aclass是您应该分配给多个您希望看起来相同的对象的东西。对象可以有多个class，但只能有一个id。

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

于 2013-07-02T15:20:21.297 回答