CODEWITHSUNDEEP
jqueryhtmlwordpress
Jordan
Jordan

Reputation: 237

jQuery & Wordpress - change button text with jquery

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>

Upvotes: 0

Views: 1566

Answers (1)

Gene Parcellano
Gene Parcellano

Reputation: 6044

$(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;}

Upvotes: 1

Related Questions