Javascript jquery中attr和data之间的区别？

我尝试了以下场景：-

我有一个页面，里面有内容（文章、博客等）

有一些类别可以过滤它们

因此，当我选择并分类包含内容的div时，将使用jquery进行修改

最初显示7篇文章/博客等，如果内容数量超过7，则有一个按钮可阅读更多内容

现在我遇到了一个关于attr和数据的特殊疑问

我在js文件中使用以下代码过滤内容：-

 $("[id^=filter]").click(function(){
$(".tag").children('a').removeClass("active");
$(this).addClass("active");
$('#wl-more-articles').data("current-category",$(this).data("currentCategory"));
$.get('/xxx/api/more-articles/?category='+$(this).data("currentCategory")+"&offset="+0+"&filtered="+1,
            function(result, status){
                $(".wl-cards-container").empty();
                $('.wl-cards-container').append(result.cards);
                $('#wl-more-articles').data("total-articles",result.total_content);
                if(result.next_offset >0)
                {
                     $('#wl-more-articles').show()
                }
                else
                {
                    $('#wl-more-articles').hide()
                }
            });
 });
});

在上面的代码中，wl更多文章是我获取更多文章的部分。以下是它的代码：-

    $('#wl-more-articles').click(function(){
    var el = $(this);
    $.get('/xxx/api/more-articles/?offset='+$(this).data("nextOffset")+"&content_type="+$(this).data("contentType")+"&total_articles="+$(this).data("totalArticles")+"&category="+$(this).data("currentCategory"),
            function(result, status){
      $('.wl-cards-container').append(result.cards);
      if(result.next_offset === null || result.next_offset === 'undefined'){
          el.hide();
      }else{
          el.data("nextOffset", result.next_offset);
      }
    });
  });

现在，当我选择一个特定的类别时，比如说类别1，它有9篇文章，所以最初会显示7篇文章。现在我点击“阅读更多”按钮，一切正常，我的内容也来了。现在，当我选择另一个类别时，比如类别2，它有10篇文章，最初有7篇文章，当我单击read more时，如果我在下面的部分中使用attr而不是data，会发生一些奇怪的事情：-

 $('#wl-more-articles').attr("data-total-articles",result.total_content);

现在，如果执行上述操作，则前一个类别的数据将属于此类别（即类别1的类别和文章数量），但如果我使用数据，则情况完全正常。

如果设置使用

.data（'total-articles'）

您使用的。

数据（）

当使用

.attr（'data-total-articles'）进行设置时

您使用

.attr（）