当我在 JqueryMobile 中单击可点击项目时，如何更改可点击项目？

Question

我正在开发一个使用phonegap 和jquerymobile 的任务。

当我点击可点击项目时，我应该如何更改它们的颜色？ 我写了下面的代码：

 $(".testbutton").click(function(){
    $(".testbutton").css("background-color","yellow");
    });

但是当我在上面释放鼠标后，背景颜色只会变成黄色。我希望每当我的鼠标单击该项目时它就会变成黄色，并在释放鼠标时恢复到原来的背景颜色。

有人可以帮忙吗？

Answer 1

这就是你想要实现的目标吗？

实例：

• 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>