Question

在我的博客主题上，我有一个＆＃34; SHOW MORE POST＆＃34;页面最后一篇文章后的按钮。当用户单击该按钮时，将加载更多帖子而不刷新页面。我正在使用＆＃34; Ajax加载更多＆＃34;来自Wordpress存储库的插件。当没有更多帖子加载时，我想隐藏这个按钮。

当没有更多帖子时，该按钮将成为＆＃34; .done＆＃34;的类，由ajax添加。

我一直试图使用jQuery隐藏按钮：

jQuery(document).ready(function($) {

var morebutton = $("button#load-more");

    if ( $(morebutton).hasClass("done") ) {
        $(this).hide();
    }

});

但我没有结果。我想我有合适的选择器。我试图在点击上隐藏它，它的工作原理。我使用了这个jquery：

jQuery(document).ready(function($) {

var morebutton = $("button#load-more");

    $(morebutton).click(function(){
        if ( $(this).hasClass("done") ) {
            $(this).hide();
        }
    });

 });

所以，我的问题是我如何检查元素是否为hasClass，如果这个类是用AJAX动态添加的？

当我使用document.ready函数时，它将仅在document.ready上检查我的元素。它是否正确？那么我怎么能在ajax事件后检查呢？

加载所有帖子后隐藏按钮的其他方法是什么？

谢谢！

Answer 1

morebutton已经是一个jquery对象了，所以，你不需要再次换行。

$(function() {
    var morebutton = $("button#load-more");
    morebutton.click(function(){
        if ( $(this).hasClass("done") ) {
            $(this).hide();
        }
    });
});

Answer 2

如果我理解你是对的，你想在ajax完成时这样做，所以你应该在ajax成功或完成时这样做：

$.ajax({
    url: whatever
})
.done(function( data ) {
    var morebutton = $("#load-more");

    //if ( morebutton.hasClass("done") ) { it is done now, check for something else, or just hide
        morebutton.hide();
    //}
});

您可以像这样定义全球成功：

$(document).ajaxSuccess(function() {
    var morebutton = $("#load-more");

    if ( morebutton.hasClass("done") ) { 
        morebutton.hide();
    }
});

请点击此处了解详情：https://api.jquery.com/ajaxSuccess/

Answer 3

嗯，事实证明我试图让它变得比以前复杂得多。

我没有使用jQuery，而是使用了CSS。我添加了这样的规则：

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

......现在它运作良好！

感谢您的帮助！ =）

检查元素hasClass是否添加了AJAX

3 个答案: