使用data（）更新时，无法通过attr（）获取修改后的值

Question

HTML 的

/Users/Jack/.rvm/gems/ruby-2.3.1@global/gems/activesupport-5.0.0.1/lib/active_support/i18n_railtie.rb:45:in `map': undefined method `existent' for #<String:0x007fd4a2bfa5d0> (NoMethodError)
Did you mean?  extend

脚本

<a href="javascript:;" class="btn-link link-primary ml10 js-lock" data-val="1">loc</a>

现在点击，控制台输出：

  

1

     

1

现在再次点击，控制台输出：

  

1

     

0

另一种情况

HTML 的

$(".js-lock").click(function(e) {
    console.info($(this).attr("data-val"));
    console.info($(this).data("val"));
    $(this).data("val", "0");
})

脚本

<a href="javascript:;" class="btn-link link-primary ml10 js-lock" data-val="1">lock</a>

现在点击，控制台输出：

  

1

     

1

现在再次点击，控制台输出：

  

0

     

1

有人可以告诉我为什么???

Answer 1

由于.data()使用内部缓存，因此仅使用数据属性作为默认值。在通过.data(key, value)执行更新操作时，DOM不会更新。

如果使用.attr()来获取和设置，您将获得更新的值。您不应使用的内容是.data()和.attr()的混合。如果您没有真正的理由更新属性，请使用.data()来获取和设置值。