Javascript Jquery Mobile-从其他按钮单击更改标题中的图标颜色_Javascript_Android_Css_Html_Jquery Mobile

Javascript Jquery Mobile-从其他按钮单击更改标题中的图标颜色

javascript android css html jquery-mobile

Javascript Jquery Mobile-从其他按钮单击更改标题中的图标颜色,javascript,android,css,html,jquery-mobile,Javascript,Android,Css,Html,Jquery Mobile,我想改变一些按钮点击标题中图标的颜色我可以使用下面的CSS在图标上添加一些颜色：#myhead:after{ 背景色：#FF4D； } 但是我不能通过点击按钮来改变它的颜色示例代码： <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link

我想改变一些按钮点击标题中图标的颜色

我可以使用下面的CSS在图标上添加一些颜色：
#myhead:after{ 背景色：#FF4D； }

但是我不能通过点击按钮来改变它的颜色

示例代码：

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
    </head>
    <style>

        /* #id Products */
         #myhead:after {
            background-color: #ff4d4d;
        }
    </style>

    <script>
    function changecolor()
    {
        $('#myhead:after').css("background-color", "green");
        }
    </script>
<body>


<div data-role="page" id="mainpage">

    <div data-role="header"  class=" ui-icon-circle ui-alt-icon ui-btn-icon-right " id="myhead">
    <h3>Filter</h3>
    </div>

    <div role="main" class="ui-content">
        <a href="#" class="ui-btn" onclick="changecolor()">Change Color</a>
    </div>
</div>


</body>
</html>


/*#id产品*/
#我的头：之后{
背景色：#FF4D；
}
函数changecolor（）
{
$（'#myhead:after'）.css（“背景色”、“绿色”）；
}
滤器

如下更改CSS

#myhead h3 {
     background-color: #ff4d4d;
}

$('#myhead h3').css('background-color', 'green');

并更改JS，如下所示

#myhead h3 {
     background-color: #ff4d4d;
}

$('#myhead h3').css('background-color', 'green');

您不能操作css:after，因为从技术上讲它不是DOM的一部分，因此任何JavaScript都无法访问它。因此，您需要创建自定义圆图标

<!DOCTYPE html>
<html>

  <head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
  <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<style>
 .change-color {
    background-color: #ff4d4d;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    float: right;
    margin: -30px 10px 0px 0px;
 }
</style>

<script>
 function changecolor() {
    $('#myhead').css('background-color', 'green');
 }
</script>

<body>
  <div data-role="page" id="mainpage">
    <div data-role="header" class="">
        <h3>Filter</h3>
        <div class="change-color" id="myhead"></div>
    </div>

    <div role="main" class="ui-content">
        <a href="#" class="ui-btn" onclick="changecolor()">Change Color</a>
    </div>
 </div>
 </body>

 </html>


.换颜色{
背景色：#FF4D；
边界半径：50%；
宽度：20px；
高度：20px；
浮动：对；
余量：-30px 10px 0px 0px；
}
函数changecolor（）{
$（'#myhead'）.css（'background-color'，'green'）；
}
滤器

我的问题是更改图标颜色，而不是标题颜色。不过，谢谢你提供的信息，马亨德拉。