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

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

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

1 个答案: