Question

我有很多具有预定义属性data-key="foo"的元素。现在，在更新此元素值后，我还会更新它的data-key属性（$(this).data('key', 'boo');）。之后我无法再使用选择器[data-key="boo"]选择它。我在这做错了什么？
我不想再次循环所有元素并检查它的data-key属性值。另据我所知:data(key)选择器无法按键选择元素值？

＆＃13;

$(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);
});

＆＃13;

<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>

＆＃13;

Answer 1

使用.data()时，使用$.cache 而不是属性将其存储在内部缓存中。因此，当使用属性值选择器时，只选择了一个元素。

您可以浏览这些帖子

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

如果您想使用属性选择元素，请使用.attr()代替.data()

＆＃13;

$(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);
});

＆＃13;

<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>

＆＃13;

但是，如果您仍想使用.data()，则可以使用.filter()来识别元素。

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

＆＃13;

$(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);
});

＆＃13;

<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>

＆＃13;

在数据属性发生变化后选择元素

1 个答案: