jQuery & Wordpress - change button text with jquery

Question

i have a button at the bottom of my page, and when the user scrolls to the bottom of the page a class gets added called 'done'. (this is all handled through a plugin).

i'm trying to change the text of this button when this class gets added. i have worked this script up but have no idea why it's not working?

jquery

jQuery(document).ready(function(){
    if ( $('#load-more').hasClass('done') ) {
        $(this).text('No more posts to load');
    };
});

html

<button id="load-more" class="alm-load-more-btn more done">Load more posts...</button>

Gene Parcellano · Accepted Answer · 2014-11-07 03:47:43Z

1

$(document).ready() will trigger the function after the page loads. During that time the button will not have the class "done" yet.

You may want to trigger that function after the user has scrolled to the bottom of the page instead. Like so:

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
       $('#load-more').hasClass('done').text('No more posts to load');
   }
});

Another solution would be to use CSS instead.

<button id="load-more" class="alm-load-more-btn more done">
    <span class="load-more">Load more posts...</span>
    <span class="no-more">No more posts to load</span>
</button>

#load-more .no-more,
#load-more.done .load-more {display:none;}
#load-more.done .no-more {display:block;}

edited Nov 7, 2014 at 3:47

answered Nov 7, 2014 at 3:40

Gene Parcellano

6,0545 gold badges40 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jordan Over a year ago

Is there a way to do this dynamically? Since it's not always at the bottom of the window

Gene Parcellano Over a year ago

@Jordan I added another solution. Hopefully that helps. Good luck!

Collectives™ on Stack Overflow

jQuery & Wordpress - change button text with jquery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related