1

JqueryMobile でボタンをクリックすると、ボタンが押された効果を取得しようとしています。ボタンをクリックしてこの効果を得るためにcssを使用してクラスを追加することはできますが、以前の状態（リリース時）に戻すことはできません。

以下は私のindex.htmlコードです：

<div class="loginbutton" id="sgninBtn">  </div>

以下は、ボタン効果を取得するスクリプト コードです。

$(document).on("click", "#sgninBtn", function() {    
$("#sgninBtn").addClass('loginbuttonclick');  
});    

$(document).on("taphold", "#sgninBtn", function() {
$("#sgninBtn").addClass('loginbuttonpressed');
});

以下は、ボタン効果を取得するための私の CSS コードです。 

.loginbutton {width:300px; height:48px; background:url(../images/samplespriteimage-login.png) 0 0px;}
.loginbuttonpressed {width:300px; height:48px; background:url(../images/samplespriteimage-login.png) 0 -48px;}
.loginbuttonclick {width:300px; height:48px; background:url(../images/samplespriteimage-login.png) 0 -96px;}

これらのクラスはすべて必要に応じて適用されますが、クリックして特定のスタイルを取得すると、ボタンを離しても以前のスタイルに戻りません。JqueryMobile のリリース イベントで機能するものはありますか。または、この問題を解決する方法はありますか。

pagebefore イベントで追加されたクラスを削除していますが、理想的にはボタンを離したときにそれを実行したいと考えています。これについて私を助けてください。ありがとう

4

1 に答える 1

0

必要なのは.removeClass()イベントが終わった後だけです。

デモ

clickイベントは次の 2 つのイベントに分けることができます。

  1. イベントの開始mousedown、vmousedownまたはtouchstart. ここで、クラスを追加したり、その他のことを行います。

    $('#sgninBtn').on('vmousedown touchstart', function (e) {
  if (e.type == 'touchstart') {
    $(this).addClass('loginbuttonpressed');
  } else {
    $(this).addClass('loginbuttonclick');
  }
  return false;
});

  2. イベントの終了、 mouseup、vmouseupまたはtouchend。ここで、クラスを削除したり、他のことを行います。

    $('#sgninBtn').on('vmouseup touchend', function (e) {
  if (e.type == 'touchend') {
    $(this).removeClass('loginbuttonpressed');
  } else {
    $(this).removeClass('loginbuttonclick');
  }
  return false;
});

.

于 2013-09-25T10:59:14.473 に答える