按下/釋放時更改按鈕的狀態

Question

我正在開發一個移動網站。 我已經在Java腳本中創建了動態按鈕。 現在，我想為每個按鈕綁定兩個事件。

1）按下時，將按鈕的背景圖像更改為img-pressed.jpg。 注意：每個按鈕都有其自己的常規圖像源和按下圖像源。

2）單擊時，執行某些操作。

我很困惑要一起處理這兩個事件。

    ItemsToAdd += '" id="'+ appVal.id +'">\
               <a id="' + appVal.id + '" data-role="button" style="background-image:url('+ img_path + appVal.big_icon_normal_path +')" class="custom-button" href="#"></a>\
               <p><br><b>' + appVal.name + ' </b><br> ' + appVal.apptypename + '<br><i>' + appVal.price + '</i></p> </div>';


$("#appGrid" + catVal.id).append($(ItemsToAdd));
$("#appGrid" + catVal.id).trigger("create");    

$("#appGrid" + catVal.id + " > #" + appVal.id + " > #" + appVal.id ).bind('click', function ()
{
    updateAppInfo(appVal.id);
});

該代碼在click事件上運行良好。 實際上，我正在更改按鈕單擊上的某些內容。 現在，我想在按下時更改圖像的來源，並在釋放按下時更改為正常的來源。 內容更改也應該起作用。

多謝您的協助。 提前致謝。

Answer 1

嘗試添加以下內容：

// preload the image
var preloader = new Image();
preloader.src = img_path + appVal.big_icon_mousedown_path;

// bind the events
$('.custom-button').bind({
    'mousedown' : function() {
            // you'll need to set appVal.big_icon_mousedown_path or similar 
            $(this).css('background-image', 'url('+ img_path + appVal.big_icon_mousedown_path +')');
    },
    'mouseup mouseleave' : function() {
            $(this).css('background-image', 'url('+ img_path + appVal.big_icon_normal_path +')');
    }
});