Question

我必须编写一个使用大量数据属性的脚本。

<span data-myval="123">something</span>

通常，我以这种方式将数据属性用作选择器。

$('[data-myval="123"]').dosomething

带有另一个包含data-myval-id的变量，我以这种方式进行操作

$('[data-myval="'+$(this).attr('data-myval')+']').dosomething

现在我看起来很荒唐，但是如果有一种方法，可以使用较短的数据属性作为选择器，那就找不到最后的答案了吗？

非常感谢。

Answer 1

[data-value] {
  /* Attribute exists */
}

[data-value="foo"] {
  /* Attribute has this exact value */
}

[data-value*="foo"] {
  /* Attribute value contains this value somewhere in it */
}

[data-value~="foo"] {
  /* Attribute has this value in a space-separated list somewhere */
}

[data-value^="foo"] {
  /* Attribute value starts with this */
}

[data-value|="foo"] {
  /* Attribute value starts with this in a dash-separated list */
}

[data-value$="foo"] {
  /* Attribute value ends with this */
}

来源：cc-tricks

您还可以将属性放在变量中

var foo = $('[data-value="foo"]'),
    thisVal = $(this).attr('data-value'),
    newFoo = $('[data-value="'+thisVal+'"]');
    someElement.attr("data-value", thisVal);

将数据属性用作选择器的最短方法是什么？

1 个答案: