Question

这个古老的问题了！

我有一个按钮可以通过ajax加载更多帖子，效果很好。该按钮具有一些数据属性，告诉AJAX函数从哪个类别（data-id）获取帖子。

<a href="#" class="button js-load-more" data-page="1" data-id="4" data-taxonomy="sectors" data-posttype="products">Load More Products</a>

我有一个过滤器（select元素），可让用户更改上面按钮的data-id属性。

当您使用过滤器下拉列表更改data-id时，data-id中的按钮DOM会更新，但通过AJAX发送的数据不会获取新的id id 1}}，而是发送旧的$(document).on('click', '.js-load-more', function(e) { e.preventDefault(); var button = $(this); var offset = $('.product-box').length+1; var termID = button.data('id'); // NOTE: this seems to not pickup the new ID if it's been changed var taxonomy = button.data('taxonomy'); var postType = button.data('posttype'); var ajaxDump = $('.ajax-dump'); button.html('Loading...'); $.ajax({ url: loadMoreProducts.ajax_url, type: 'post', data: { action: 'load_more_products', offset: offset, termID: termID, taxonomy: taxonomy, postType: postType, }, dataType: 'json', success: function(result) { var products = result.posts; var count = result.count; ajaxDump.append(products); moreProductsCallback(); if( count < 12 ) { $('.js-load-more').hide(); } }, error: function(error) { console.log(error); } }); function moreProductsCallback() { ajaxDump.find('.page.hide').fadeIn(500, function() { $('.page').removeClass('hide'); $.fn.matchHeight._maintainScroll = true; $.fn.matchHeight._update(); button.html('Load More Products'); }); } });，意味着它得到了错误的类别。

加载更多按钮

$('.js-filter-sector').on('change', function() {

    var ajaxDump = $('.ajax-dump');
    var button = $('.js-load-more');
    var termID = $(this).val();
    var taxonomy = button.attr('data-taxonomy');
    var postType = button.attr('data-postType'); 

    $.ajax({
        url: loadMoreProducts.ajax_url,
        type: 'post',
        data: {
            action: 'load_more_products',
            offset: 0,
            termID: termID,
            taxonomy: taxonomy, 
            postType: postType,
        }, 
        dataType: 'json',
        success: function(result) {

            var products = result.posts;
            var count = result.count;

            $('.js-load-more').show();
            ajaxDump.empty();
            ajaxDump.append(products);
            filterSectorCallback();

            if( count < 12 ) {
                $('.js-load-more').hide();
            }
        },
        error: function(error) {
            console.log(error);
        }
    });

    function filterSectorCallback() {
        ajaxDump.find('.page.hide').fadeIn(500, function() {

            button.attr('data-id', termID); // NOTE: this works, updates the ID on the element
            $(this).removeClass('hide');
            button.html('Load More Products'); 

            $.fn.matchHeight._maintainScroll = true;
            $.fn.matchHeight._update();

        });
    }


});

过滤器下拉列表

public static void main(String[] args){
 String yourText = "\033[1mThis is a BOLD line\033[0m";
 System.out.println(yourText);
}

需要注意的一个奇怪的事情是，如果我首先使用过滤器，而不加载更多帖子，它会获取正确的帖子。如果您在已经获取更多帖子后运行过滤器，这似乎只是一个问题。

这可能是AJAX的缓存问题吗？

Answer 1

问题是因为您使用data()作为getter（这很好），但attr()作为setter。这意味着该值设置在与您尝试读取它的位置不同的位置。

要解决此问题，请使用data()同时让和设置值：

// in click handler of .js-load-more
var termID = button.data('id')

// in change handler of .js-filter-sector
button.data('id', termID);

我还建议您更改attr('data-*')的其他用途：

var taxonomy = button.data('taxonomy');
var postType = button.data('postType');

这是因为在处理data()属性时应始终使用data，除非您明确需要从DOM读取属性（例如对于CSS选择器）。

点击jQuery没有获取AJAX更改的内容

加载更多按钮

过滤器下拉列表

1 个答案: