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>

Answer 2

您遇到了一些错误，首先您的JavaScript试图更改类别为psql --host=localhost --dbname=mattermost --username=mmuser --password和button1的按钮，但是您的按钮具有类别button2和values1。

也要添加属性，我总是使用jQuery的values2函数，因为在使用.attr()进行添加时，我还遇到了无法添加属性的问题。因此，我仅使用.data()来检索数据属性。

在将数组放入HTML属性之前，还应该.data()将数组放入数组。

strigify

var values1 = [];
var values2 = ['not', 'empty'];

$('.button1').attr('data-values',JSON.stringify(values1));
$('.button2').attr('data-values', JSON.stringify(values2));

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

Answer 3

对于空数组，只需将if条件放入下面的示例中即可。希望对您有帮助

<button class="button1">Hello1</button>
<button class="button2">Hello2</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

，如果您想同时检查.btnEmpty{ color: red; } if (values1.length === 0) { $('button').addClass('btnEmpty'); }else{ $('button').removeClass('btnEmpty'); }和var，请检查条件是否存在

||

CSS从.data（）选择空数组

3 个答案: