как изменить кликабельный элемент, когда я нажимаю на них в JqueryMobile?

Question

Я занимаюсь разработкой задачи использования phonegap и jquerymobile.

Как мне сделать, чтобы изменить цвет активируемого элемента, когда я нажимаю на них?Я написал код ниже:

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

Но цвет фона изменится только на желтый после того, как я отпущу на нем мышь.Я хочу, чтобы он менялся на желтый всякий раз, когда моя мышь щелкает по элементу татуировки, и восстанавливал его первоначальный цвет фона, когда я отпускаю мышь.

Может кто-нибудь помочь, пожалуйста?

Answer 1

Это то, что вы пытаетесь достичь?

Live Пример:

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