动态更改jQuery移动图标背景颜色

Is there a way to dynamically change the icon's background color ? I know how to change it permanently:

有没有办法动态更改图标的背景颜色?我知道如何永久改变它:

ui-icon-location:after{background-color: red;}

The thing is that I would like to change the background to red only when I'm a certain distance from a location using Cordova's watchPosition. By defaul the icon's background would be

问题是,只有当我与使用Cordova的watchPosition的位置相距一定距离时,我才想将背景更改为红色。默认情况下,图标的背景将是

.ui-icon-location:after{background-color: #3399FF;}

Everything works just fine, the icon is the only thing I would love to get working. I would appreciate any ideas.

一切都很好,图标是我唯一喜欢的工作方式。我会很感激任何想法。

Thanks!

2 个解决方案

#1

you can apply your test about the distance inside this function and change the color by using if or switch statement :

您可以对此函数内的距离应用测试,并使用if或switch语句更改颜色:

JavaScript

    setInterval(function(){

    function resetStyle(elemClass) {

        switch(expression) {
            case Position:
                elem = document.getElementByClass(elemClass);
                elem.style.background = 'red';
                break;
            case Position2: 
                elem = document.getElementByClass(elemClass);
                elem.style.background = 'black';
                break;
            default:
                elem = document.getElementByClass(elemClass);
                elem.style.background = 'defaultColor'; 
        }


    }

}, 100);

you can also use setInterval to keep tracking for changes and catch the position , here is a fuction who can helps you find the position of an element in the window it can be useful for your tests :

您还可以使用setInterval来跟踪更改并捕获位置,这里有一个功能可以帮助您找到窗口中元素的位置,它可以对您的测试有用:

// get position fuction

 function getPos(el) {
    // yay readability
    for (var lx=0, ly=0;
         el != null;
         lx += el.offsetLeft, ly += el.offsetTop, el = el.offsetParent);
    return {x: lx,y: ly};
}

#2

You can use jquery to change css dynamically.

您可以使用jquery动态更改css。

("div").hover(function(){
$("#yourElementId").css("ui-icon-location:after{background-color: #3399FF;}");
});

But it will be better to use addClass and removeClass function.

但是使用addClass和removeClass函数会更好。

//css

.ui-icon-location:after{background-color: #3399FF;}

//Jquery

("div").hover(function(){
$("#yourElementId").addClass("ui-icon-location");
});

This will call the css class and do exactly what you have defined in your css class. Similar you can use removeClass to remove the css class.

这将调用css类并完全按照您在css类中定义的内容执行。类似,您可以使用removeClass删除css类。

#1