Using TouchSwipe with $(this)

Question

I'm trying to figure out how to use the touchSwipe plugin to make it affect only one element.

<div class="element">Content 1 <p class="hello">Hello</p></div>
<div class="element">Content 2 <p class="hello">Hello</p></div>
<div class="element">Content 3 <p class="hello">Hello</p></div>

My jQuery goes like this:

$('.element').each(function() {
$(this).swipe({
swipeLeft: function() { $(this).find('.hello').fadeOut(300) }
});
});

Problem is this doesn't work (actually, nothing happens, but swipeLeft is recognized).

The effect I want basically is that if I swipe left on the div that has content 1, only its "Hello" should fade out.

score 0 · Answer 1 · answered Jul 21 '16 at 22:25

You can do something like this to get the contents of the element you want to check for:

            var strID = $(this).html().substr(0, 9);

Then apply the fadeOut if the contents match your specified criteria, something like:

            if (strHTML == "Content 1")
                $(this).find(".hello").fadeOut(300);

Assuming of course you know the contents of the target element, or there's some discernible pattern you can use.

Using TouchSwipe with $(this)

1 Answers1