Select 数据属性改变后的元素

Question

我有很多具有预定义属性的元素 data-key="foo"。现在更新此元素值后，我还更新了它的 data-key 属性 ($(this).data('key', 'boo');)。之后我不能再使用select或[data-key="boo"]来select它了。我在这里做错了什么？
我不想再次循环所有元素并检查它的 data-key 属性值。 另外据我了解 :data(key) select 或者不能 select 键和值的元素？

$(document).ready(function() {
  $('[data-key="foo"]').data('key', 'boo');

  setTimeout(function() {
    $('[data-key="boo"]').css('color', 'green');
    $('#element').append(' - Now it must be green, because data-key now is ' + $('#element').data('key'));
  }, 1000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-key="foo" id="element">MAKE THIS GREEN</div>
<div data-key="boo" >data-key="boo" by default...</div>

Answer 1

使用 .data() 时，使用 $.cache 而非属性 将其存储在内部缓存中。所以当使用属性值 select 或者只有一个元素是 selected.

你可以通过这些post

How does jQuery .data() work?
Where is jQuery.data() stored?

如果您想使用 select 元素的属性，请使用 .attr() 而不是 .data()

$(document).ready(function() {
  $('[data-key="foo"]').attr('data-key', 'boo');

  setTimeout(function() {
    $('[data-key="boo"]').css('color', 'green');
    $('#element').append(' - Now it must be green, because data-key now is ' + $('#element').data('key'));
  }, 1000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-key="foo" id="element">MAKE THIS GREEN</div>
<div data-key="boo" >data-key="boo" by default...</div>

然而，如果您仍想使用 .data()，则可以使用 .filter() 来标识元素。

$('[data-key="foo"]').data('key', 'boo');
setTimeout(function() {
  $('[data-key]').filter(function(){
    return $(this).data('key') == 'boo';
   }).css('color', 'green');
}, 1000);

$(document).ready(function() {
  $('[data-key="foo"]').data('key', 'boo');

  setTimeout(function() {
    $('[data-key]').filter(function(){
      return $(this).data('key') == 'boo';
     }).css('color', 'green');
    $('#element').append(' - Now it must be green, because data-key now is ' + $('#element').data('key'));
  }, 1000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-key="foo" id="element">MAKE THIS GREEN</div>
<div data-key="boo" >data-key="boo" by default...</div>

Select 数据属性改变后的元素

Select element by data attribute after it's change

jquery

html

jquery-selectors

custom-data-attribute