jquery mobile 버튼 터치시 클래스 추가/제거

Question

jquery mobile을 사용하여 하이브리드 응용 프로그램을 만들고 있습니다. 터치 시작시 클래스를 추가하고 터치 종료시 클래스를 제거하는 버튼이 있습니다.

그래서 내 JS 코드는

...

$(document).on('pagebeforeshow', function(){ 
    $(document).on('vmousedown','.icGnb1' ,function(){ 
     $(".icGnb1").addClass('on'); 
    }).on('vmouseup', function(){ 
     $(".icGnb1").removeClass('on'); 
    }).on("vmousecancel", function() { 
     $(".icGnb1").removeClass('on'); 
    }); 

    $(document).on('vmousedown','.icGnb2' ,function(){ 
     $(".icGnb2").addClass('on'); 
    }).on('vmouseup', function(){ 
     $(".icGnb2").removeClass('on'); 
    }).on("vmousecancel", function() { 
     $(".icGnb2").removeClass('on'); 
    }); 

    $(document).on('vmousedown','.icGnb3' ,function(){ 
     $(".icGnb3").addClass('on'); 
    }).on('vmouseup', function(){ 
     $(".icGnb3").removeClass('on'); 
    }).on("vmousecancel", function() { 
     $(".icGnb3").removeClass('on'); 
    }); 

    $(document).on('vmousedown','.icGnb4' ,function(){ 
     $(".icGnb4").addClass('on'); 
    }).on('vmouseup', function(){ 
     $(".icGnb4").removeClass('on'); 
    }).on("vmousecancel", function() { 
     $(".icGnb4").removeClass('on'); 
    }); 


    $(document).on('vmousedown','.icM1' ,function(){ 
     $(".icM1").addClass('on'); 
    }).on('vmouseup', function(){ 
     $(".icM1").removeClass('on'); 
    }).on("vmousecancel", function() { 
     $(".icM1").removeClass('on'); 
    }); 

    $(document).on('vmousedown','.icM2' ,function(){ 
     $(".icM2").addClass('on'); 
    }).on('vmouseup', function(){ 
     $(".icM2").removeClass('on'); 
    }).on("vmousecancel", function() { 
     $(".icM2").removeClass('on'); 
    }); 

    $(document).on('vmousedown','.icM3' ,function(){ 
     $(".icM3").addClass('on'); 
    }).on('vmouseup', function(){ 
     $(".icM3").removeClass('on'); 
    }).on("vmousecancel", function() { 
     $(".icM3").removeClass('on'); 
    }); 
}); 

내가 모든 버튼이 터치 이벤트와 함께해야 할 필요가 있습니까? 내 말이 ..이 옳은 길인가요?

Answer 1

당신의 모든 버튼이 같은 일을한다고 가정하면, 다음 코드는 다음과 같아야합니다

$(document).on('pagebeforeshow', function(){ 

    $(":button").on('vmousedown', function(){ 
      $("this").addClass('on'); 
     }), on('vmouseup', function(){ 
      $("this").removeClass('on'); 
     }).on("vmousecancel", function() { 
      $("this").removeClass('on'); 
     }); 
    }); 

});