我正在开发使用phonegap和jquerymobile的任务。
当我单击可点击项目时,该如何更改它们的颜色?
我写了下面的代码:
$(".testbutton").click(function(){
$(".testbutton").css("background-color","yellow");
});
但是背景颜色只会在我释放鼠标后才变为黄色。我希望它在鼠标单击tat项时变为黄色,并在释放鼠标时恢复为原始背景色。
谁能帮忙吗?
最佳答案
这是您要完成的工作吗?
现场示例:
http://jsfiddle.net/A2bd3/16/
CSS:
.task-bg-color {
background-color: yellow;
}
JS:
$('#clickAndHold').mousedown(function() {
$(this).children().addClass('task-bg-color');
$('ul#tasks').listview('refresh');
});
$('#clickAndHold').mouseup(function() {
$(this).children().removeClass('task-bg-color');
$('ul#tasks').listview('refresh');
});
$('#clickAndStick').click(function() {
$(this).children().addClass('task-bg-color');
$('ul#tasks').listview('refresh');
});
$('#clickAndToggle').click(function() {
if ($(this).children().hasClass('task-bg-color')) {
$(this).children().removeClass('task-bg-color');
} else {
$(this).children().addClass('task-bg-color');
}
$('ul#tasks').listview('refresh');
});
HTML:
<div data-role="page" class="type-home">
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f" id="tasks">
<li data-role="list-divider">Tasks (Background actions)</li>
<li id="clickAndHold"><a href="#">Click & Hold</a></li>
<li id="clickAndStick"><a href="#">Click & Stick</a></li>
<li id="clickAndToggle"><a href="#">Click & Toggle</a></li>
</ul>
</div>
</div>