2014-11-07 3 views
0

У меня есть кнопка внизу страницы, а когда пользователь прокручивается в нижней части страницы, класс добавляется с именем «done». (все это обрабатывается через плагин).jQuery & Wordpress - текст кнопки изменения с jquery

Я пытаюсь изменить текст этой кнопки, когда этот класс добавляется. Я работал над этим скриптом, но понятия не имею, почему он не работает?

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> 

ответ

1

$(document).ready() активирует функцию после загрузки страницы. В течение этого времени кнопка еще не будет иметь класс «done».

Возможно, вы захотите вызвать эту функцию после того, как пользователь выполнил прокрутку в нижней части страницы. Например:

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

Другим решением было бы использовать CSS вместо этого.

<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;} 
+0

Есть ли способ сделать это динамически? Так как это не всегда в нижней части окна – Jordan

+0

@ Jordan Я добавил еще одно решение. Надеюсь, это поможет. Удачи! –

Смежные вопросы