我正在开发使用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 &amp; Hold</a></li>
            <li id="clickAndStick"><a href="#">Click &amp; Stick</a></li>
            <li id="clickAndToggle"><a href="#">Click &amp; Toggle</a></li>
        </ul>
    </div>
</div>

10-07 19:22
查看更多