javascript - Css 从 .data() 中选择空数组

Question

我正在通过 Jquery .data() 将数组保存到按钮中。

如果数组为空，我希望该按钮为红色。

如何通过 CSS 匹配空数组按钮？

var values1 = [];
var values2 = ['not', 'empty'];

$('.button1').data('values', values1);
$('.button2').data('values', values2);

button[data-values='[]'] { // THIS IS WRONG
  color: red;
}

<button class="values1">Hello1</button>
<button class="values2">Hello2</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

Jquery 不在属性中存储数据。它使用外部 expando 对象来避免旧浏览器中的内存泄漏和各种序列化/反序列化问题。

如果你想在 DOM 中存储数据，你需要使用 attr 代替。虽然我不认为这是个好主意。考虑重新考虑您的样式设置方法(例如，您可以添加一些语义类)

var values1 = [];
var values2 = ['not', 'empty'];

$('.values1').attr('data-values', JSON.stringify(values1));
$('.values2').attr('data-values', JSON.stringify(values2));

button[data-values='[]'] {
  color: red;
}

<button class="values1">Hello1</button>
<button class="values2">Hello2</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>