Question

(function(){
    if ($('#right-col').hasClass('shown')){
        $(this).swipe({
            swipe:function(event, direction, distance, duration, fingerCount) {
                $(this).addClass('hidden');//.text(direction);
            }
        });
    }; 
})();

这是我正在处理的webproject的滑动功能。但不知何故，我的代码不适用于if语句。如果我只使用这个：

$('#right-col').swipe({
  swipe:function(event, direction, distance, duration, fingerCount) {
    $(this).addClass('bg-blue').text("You swiped " + direction );
  }
})

工作正常。任何人都可以告诉我，上面的自我调用功能特别错吗？

Answer 1

当您执行$(this).swipe(...)时，this是window。使用其id：

选择元素

(function () {
    if ($('#right-col').hasClass('shown')) {
        $('#right-col').swipe({
            swipe: function (event, direction, distance, duration, fingerCount) {
                $(this).addClass('hidden'); //.text(direction);
            }
        });
    };
})();

请注意，如果#right-col元素的类稍后更改，则滑动功能不会受到影响。

Answer 2

这是一个小小的offtopic ...但不久前我写了自己的滑动功能。

此功能主要在ios设备中进行测试。

1.创建自定义事件。

fc = fastclick

swl = swipeleft

swr = swiperight

swu = swipeup

swd = swipedown

2.比其他滑动快得多，您可以使用简单的纯js addeventlistener或attachevent。

3.it用纯JavaScript编写。

4.此外，fastclick事件允许您更快地点击元素..

点击= 400-500ms

fastclick = 40-50ms

window.onload=function(){
(function(d){
 var
 ce=function(e,n){var a=document.createEvent("CustomEvent");a.initCustomEvent(n,true,true,e.target);e.target.dispatchEvent(a);a=null;return false},
 nm=true,sp={x:0,y:0},ep={x:0,y:0},
 touch={
  touchstart:function(e){sp={x:e.touches[0].pageX,y:e.touches[0].pageY}},
  touchmove:function(e){nm=false;ep={x:e.touches[0].pageX,y:e.touches[0].pageY}},
  touchend:function(e){if(nm){ce(e,'fc')}else{var x=ep.x-sp.x,xr=Math.abs(x),y=ep.y-sp.y,yr=Math.abs(y);if(Math.max(xr,yr)>20){ce(e,(xr>yr?(x<0?'swl':'swr'):(y<0?'swu':'swd')))}};nm=true},
  touchcancel:function(e){nm=false}
 };
 for(var a in touch){d.addEventListener(a,touch[a],false);}
})(document);

// example
var h=function(e){console.log(e.type);};
document.body.addEventListener('fc',h,false);
document.body.addEventListener('swl',h,false);
document.body.addEventListener('swr',h,false);
document.body.addEventListener('swu',h,false);
document.body.addEventListener('swd',h,false);

}

这里有更多关于如何使用它的细节..

https://stackoverflow.com/a/17567696/2450730

它可能也适用于Android。

滑动功能不适用于我的if语句

2 个答案: