PhoneGap：JQueryMobile 更新图像 src 未显示在设备上

Question

我想在语法上修改标签的图像，它不仅适用于设备（​​Android、iOS）。它在 Chrome/桌面上运行良好。

我尝试了 Div、Span 和 Img 标签，但都具有相同的行为。

请指导我如何更改背景图像。

我已经搜索了 no# 个问题并尝试了选项，但对我来说没有任何效果。

HTML

<div class="healthCare_heading">
    <span class="healthCare_heading span" onclick="Utilities.switchResultsULMaps('PageUL', 'MapsDiv')"></span>
</div>

CSS

.healthCare_heading {
    float: left;
    width: 100%;
    box-shadow: inset 0 0 0 1000px rgba(13, 13, 13, 0.8);
}
.healthCare_heading span {
    float: right;
    margin-right: 0;
    background-image: url(../images/phone/1x/healthIcon.png) ;
    background-size: 25px 25px;
    width: 30px;
    height: 30px;
    background-position: center;
    background-color: rgba(16,138,177,0.6);
}

我正在使用下面的JS代码来改变背景。

$(".healthCare_heading span").attr("style", "background-image:url(../images/phone/1x/healthCareBar_icon.png) no-repeat;margin-left: 0;background-size: 25px 25px;width: 30px;height: 30px;background-position: center;background-color: rgba(16,138,177,0.6);");

注意：- 我也试过 background-image:url() 和 background:url() 但两者都不能在设备上工作。

Answer 1

问题是您正在使用background-image 属性，例如background 速记属性。简写是background，带有这样的 url 和重复属性

background: url('../images/phone/1x/healthCareBar_icon.png') no-repeat;

所以你的 jquery 会是

$(".healthCare_heading span").attr("style", "background: url('../images/phone/1x/healthCareBar_icon.png') no-repeat;margin-left: 0;background-size: 25px 25px;width: 30px;height: 30px;background-position: center;background-color: rgba(16,138,177,0.6);");

您可能需要考虑使用 css 类选择器和 jQuery .addClass() 方法应用这些样式，而不是更改样式属性。