CODEWITHSUNDEEP
javascriptjqueryfind
Paul
Paul

Reputation: 3368

Triggering a class with its own id with find

I am using a waypoint to trigger specific elements. The div elements below all have the same class, so I am trying to trigger the id and then find the element's class and then `addClass('fadeDisplay').

Initially I tried creating a function for it to reduce the code, but once I could not get '$(this)to work with it, I attempted to do it by writing each specific element, like this$('#section3-box-img1')`.

My class is not adding and the waypoint element is firing in the correct place.

Does anyone see what I am doing wrong?

<div class="section3-box-img" id="section3-box-img1"></div>
<div class="section3-box-img" id="section3-box-img2"></div>
<div class="section3-box-img" id="section3-box-img3"></div>

var section3img = $('.section3-box-img');
$('#section3-box-img1').waypoint(function() {
//section3Fade();
    $('#section3-box-img1').find(section3img).addClass('fadeDisplay');
}, {
    offset: '75%'
});
function section3Fade() {
    $(this).find('.section3-box-img').addClass('fadeDisplay');
}

Upvotes: 0

Views: 36

Answers (3)

Anirudha Gupta
Anirudha Gupta

Reputation: 9289

$("[id^='section3-box-img']").waypoint(function() {
    $(this).addClass('fadeDisplay');
}, {
    offset: '75%'
});

Upvotes: 1

Sindhoor
Sindhoor

Reputation: 548

Just Removed the find function. (i don't know why u want to find the class if you are using an id). Try Something like Below.

$('#section3-box-img1').waypoint(function() {
//section3Fade();
    $('#section3-box-img1').addClass('fadeDisplay');
}, {
    offset: '75%'
});

function section3Fade() {
    $(this).addClass('fadeDisplay');
}

Upvotes: 1

Faisal Ashfaq
Faisal Ashfaq

Reputation: 2678

Try to make use of 'this' keyword. Something like this:

<div class="section3-box-img" id="section3-box-img1"></div>
<div class="section3-box-img" id="section3-box-img2"></div>
<div class="section3-box-img" id="section3-box-img3"></div>

var section3img = $('.section3-box-img');
$('#section3-box-img1').waypoint(function() {
    $(this).addClass('fadeDisplay');
}, {
    offset: '75%'
});

Upvotes: 1

Related Questions