如何动态更改jQuery Mobile中单个选择菜单的颜色(背景和文本),而不影响同一类的其他元素? 我尝试了几种方法,包括:
$('#select').css({color:#000});
和
$('#select').removeClass('ui-btn-up-a').addClass('custom-class');
我也尝试过添加刷新后无效:
$('#select').selectmenu('refresh');
我正在尝试根据所选值更改颜色,因此我将代码置于选择菜单的更改事件中,如此
$("#select").live("change", function(event, ui) {
...
}
我的HTML如下:
<select name="select" id="select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
欢迎任何有关更改文字颜色或背景颜色的帮助!
答案 0 :(得分:4)
这样的事情有用吗?
$("#select").live("change", function(event, ui) {
$(this).parent().attr('data-theme','e');
$('#select').selectmenu('refresh');
});
答案 1 :(得分:2)
您可以这样做:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script>
$("#page").live("pagecreate",function(){
$("#select1").live( "change", function(event, ui) {
switch($("#select1").val()){
case "1":
$("#fc .ui-select .ui-btn-up-c").removeClass('green red black').addClass('blue');
break;
case "2":
$("#fc .ui-select .ui-btn-up-c").removeClass('blue red black').addClass('green');
break;
case "3":
$("#fc .ui-select .ui-btn-up-c").removeClass('green blue black').addClass('red');
break;
case "4":
$("#fc .ui-select .ui-btn-up-c").removeClass('green red blue').addClass('black');
break;
}
});
$( "#select1" ).selectmenu({
create: function(event, ui){
$("#fc .ui-select .ui-btn-up-c").addClass('blue');
}
});
});
</script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<style>
.blue{
color:blue;
background:cyan;
}
.green{
color:green;
background:coral;
}
.red{
color:red;
background:ivory;
}
.black{
color:black;
background:lavender;
}
</style>
</head>
<body>
<div data-role="page" id="page">
<div data-role="content">
<div data-role="fieldcontain" id="fc">
<select name="select1" id="select1">
<option value="1">Blue</option>
<option value="2">Green</option>
<option value="3">Red</option>
<option value="4">Black</option>
</select>
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
如果有帮助,请告诉我