swipe-function does not work with my if-statement

Question

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

This is my swiping-function for a webproject i am working on. But somehow my code does not work with the if-statement. If i only use this:

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

It works fine. Can anyone tell me, whats especially wrong with my self-invoking-function above?

(this) won't trigger in an if statement like this – Johnny000 Oct 31 '13 at 15:40 — Johnny000, Oct 31 '13 at 15:40

score 1 · Accepted Answer · answered Oct 31 '13 at 15:39

1

When you do $(this).swipe(...), this is the window. Select the element using its id:

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

Note that if the #right-col element's class changes later on, the swipe function won't be affected.

answered Oct 31 '13 at 15:39

Jason P

26,984
3
31
45

Yep, that solved my problem. Sometimes i still use the "this"-keyword wrong. But thank you for your help! – Yannic Hansen Oct 31 '13 at 15:41
`this` in javascript can certainly be confusing. – Jason P Oct 31 '13 at 15:41

score 1 · Answer 2 · edited May 23 '17 at 11:57

this is a little offtopic... but some time ago i wrote my own swipe function.

this function is mainly tested in ios devices.

1.creates custom events.

fc = fastclick

swl = swipeleft

swr = swiperight

swu = swipeup

swd = swipedown

2.it's much faster than other swipes and you can use a simple pure js addeventlistener or attachevent.

3.it's written in pure javascript.

4.also the fastclick event allows you to click elements faster..

click = 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);

}

here are more details on how you can use it..

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

it probably works also on android.

swipe-function does not work with my if-statement

2 Answers2