2014-04-02 90 views
0

我正在制作一个混合应用程序使用jQuery的手机。 我有一个按钮,它是触摸启动时添加类,并在触摸结束时删除类。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'); 
    }); 
}); 

我必须让所有的按钮应该与触摸事件? 我的意思是......这是正确的方式吗?

+0

你能不一样的类分配给每一个按钮,而不是使用不同类型的?你用作类的东西看起来更像是IDS。 –

回答

0

假设所有的按钮做同样的事情,那么你的代码应该是:

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

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

});