jquery - 带有复选框标签的 ToggleClass

Question

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

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

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

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

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

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

谢谢。

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。