如何在 jquery mobile 1.4.2 中动态设置数据图标的样式？

Question

我刚刚在我的框架中将我的 jquery 移动代码从 1.3.1 更新到了 1.4.2。 我面临的挑战是根据开发人员的参数有条件地设置我的数据图标样式。

1.3.1 的代码，

myButton.find('.ui-icon').css('background-color',iconColor);

在 1.4.2 中，jQuery 对图标使用伪类 :after，由于它不是 DOM 的一部分，因此 JavaScript 无法访问。

我可以通过更改图标元素的 DOM 来实现它（但不想为了性能而这样做）？ 有没有其他办法？

Answer 1

如果您的用例允许您从预先确定的图标背景颜色列表中进行选择，您可以为每种颜色设置类，然后在代码中将它们切换出来。

给定一个带有图标的按钮：

<button id="btnIcon" class="ui-btn ui-icon-delete ui-btn-icon-left ">Button</button>

这里有 3 个类分别将背景颜色设置为红色、绿色和蓝色：

.redIcon:after {
    background-color: #97080E;
}
.greenIcon:after {
    background-color: #488C13;
}
.blueIcon:after {
    background-color: #1B55C0;
}

然后在脚本中，删除所有颜色类，然后添加要生效的颜色类：

$("#btnIcon").removeClass("redIcon greenIcon blueIcon").addClass(className);

这是一个有效的DEMO

单击标记为红色、绿色和蓝色的按钮以查看图标更新。