Javascript jQuery为任何其他属性名称提供了一个类

当我想检查元素是否有类时，hasClass很有用。我想对其他属性执行相同的检查。例如，我使用

<div id="nav" data-available-for="users administrators guests"></div>

---

有没有现成的漂亮的微型解决方案？

我想您正在寻找：

类似地，可以通过传递属性的新值作为第二个参数来设置属性：

$('#nav').attr('data-available-for', 'users'); // data-available-for="users"

---

这很简单：

$('#nav').attr('data-available-for').indexOf('users') != -1

---

您可以使用它制作jquery助手。

您可以利用CSS选择器：

if ($("#nav[data-available-for~=user]").length) {
    // is available for 'user'
}

或者，如果您希望元素不与条件混合：

if ($("#nav").filter("[data-available-for~=user]").length) {
    // is available for 'user'
}

---

当然，您可以在其上构建一个函数，使其更具可读性。

无需分解字符串或使用indexOf。jQuery内置了一整套css选择器，因此您可以使用属性选择器

您可以将

.is（）

和属性选择器组合使用：

if( $('#nav').is('[data-available-for~="users"]') ) { ..

---

在回到库之前，我会尝试使用一些本机javascript

<div id='strawberry-plant' data-fruit='12'></div>

<script>
var plant = document.getElementById('strawberry-plant');

//'Getting' data-attributes using getAttribute
var fruitCount = plant.getAttribute('data-fruit'); // fruitCount = '12'

// 'Setting' data-attributes using setAttribute
plant.setAttribute('data-fruit','7'); // Pesky birds
</script>

var-plant=document.getElementById（'草莓-plant'）；
//使用getAttribute“获取”数据属性
var fruitCount=plant.getAttribute（'data-fruit'）；//水果计数='12'
//使用setAttribute“设置”数据属性
plant.setAttribute（'data-fruit'，'7'）；//讨厌的鸟

在实现的地方，可以对序列化的DOM对象使用dataset属性

<div id='sunflower' data-leaves='47' data-plant-height='2.4m'></div>

<script>
// 'Getting' data-attributes using dataset 
var plant = document.getElementById('sunflower');
var leaves = plant.dataset.leaves; // leaves = 47;

// 'Setting' data-attributes using dataset
var tallness = plant.dataset.plantHeight; // 'plant-height' -> 'plantHeight'
plant.dataset.plantHeight = '3.6m';  // Cracking fertiliser
</script>

//使用数据集“获取”数据属性
var plant=document.getElementById（'sunflower'）；
var leaves=plant.dataset.leaves；//叶=47；
//使用数据集“设置”数据属性
var tallness=plant.dataset.plantHeight；//'“株高”->“株高”
plant.dataset.plantHeight='3.6m'；//裂化肥料

此外，您还可以将一些非常强大的选择功能与QuerySelector结合使用，如下所示

<script>
// Select all elements with a 'data-flowering' attribute
document.querySelectorAll('[data-flowering]');

// Select all elements with red leaves
document.querySelectorAll('[data-foliage-colour="red"]');
</script>

//选择具有“数据”属性的所有元素
document.queryselectoral（“[data]”）；
//选择具有红叶的所有图元
document.queryselectoral（'[datafootage color=“red”]'）；

根据caniuse.com的数据，几乎90%的在线用户支持querySelectorAll（）

这只是一个开始。在此处查看css3查询选择器的全部功能：

---

对于

==用户来说永远不会是真的，例如，您是对的。为了更好地反映这个问题，我更新了我的答案。这似乎是实现用户访问控制的一种非常糟糕的方式。实际上，这只是一个更好地理解我的需求的示例。我不会将其用于用户访问控制=）。在这种情况下，我怀疑您是从错误的一端解决了问题。使用事件委派和检查目标的属性将是更好的方法。
<div id='sunflower' data-leaves='47' data-plant-height='2.4m'></div>

<script>
// 'Getting' data-attributes using dataset 
var plant = document.getElementById('sunflower');
var leaves = plant.dataset.leaves; // leaves = 47;

// 'Setting' data-attributes using dataset
var tallness = plant.dataset.plantHeight; // 'plant-height' -> 'plantHeight'
plant.dataset.plantHeight = '3.6m';  // Cracking fertiliser
</script>

<script>
// Select all elements with a 'data-flowering' attribute
document.querySelectorAll('[data-flowering]');

// Select all elements with red leaves
document.querySelectorAll('[data-foliage-colour="red"]');
</script>