Question

我正在尝试以下方案： -

我有一个页面，其中有内容（文章，博客等）。
有些类别可以过滤它们。
因此，当我选择和分类时，使用jquery修改包含内容的div。
最初显示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-more-articles 是我获取更多文章的部分。以下是它的代码： -

    $('#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篇文章出现，当我点击阅读更多时，如果我使用 attr 而不是数据会发生一些奇怪的事情strong>在以下部分： -

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

现在，如果上面的类别中的数据属于此类别（即类别1的类别和数量来自），但如果我使用数据，则事情完全正常。

Answer 1

两者之间的主要区别在于它的存储位置以及访问方式。

$.fn.attr将信息直接存储在元素中，这些属性在检查时是公开可见的，也可以从元素的本机API中获得。

$.fn.data将信息存储在一个荒谬的地方。它位于一个名为data_user的闭合局部变量中，该变量是本地定义的函数Data的一个实例。无法直接从jQuery外部访问此变量。

使用attr()

设置的数据

可从$(element).attr('data-name')
可从element.getAttribute('data-name'),
如果数据名称的形式也可以从$(element).data(name)和element.dataset['name']以及element.dataset.name
在检查时可见元素
不能是对象

使用.data()

设置的数据

仅可从.data(name)
无法从.attr()或其他任何地方访问
检查时元素上未公开显示
可以是对象

jquery中attr和data之间的区别？

1 个答案: