0

私は携帯サイトを開発しています。Javaスクリプトで動的ボタンを作成しました。ここで、各ボタンに 2 つのイベントをバインドします。

1) ボタンが押されたとき、ボタンの背景画像を img-pressed.jpg に変更します。注: すべてのボタンには、独自の通常の画像ソースと押された画像ソースがあります。

2) クリックすると、何かを実行します。

この 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);
});

コードはクリックイベントで正常に動作しています。実際には、ボタンのクリックでいくつかのコンテンツを変更しています。今、私は押されたときに画像のソースを変更し、プレスが離されたときにソースを通常に変更したいと考えています。コンテンツの変更もそれで機能するはずです。

助けていただければ幸いです。前もって感謝します。

4

1 に答える 1

0

これを追加してみてください：

// 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 +')');
    }
});
于 2013-11-13T16:51:44.090 に答える