标签: custom-data-attribute

我经常看到html data-attribute(s)将特定的值/参数添加到像Bootstrap这样的html元素中,它使用它们来" 链接 "按钮到要打开的模态对话框等.

<button type="button" class="close" data-dismiss="modal" aria-label="Close">

现在,我看到一个几乎着名的CSS框架,Kube,在其新版本中广泛使用简单的自定义属性,如下所示:

<column cols="4">4</column> 

<span class="label label-black" outline bold>Black</span>

其他动作示例例如,这里是可见的.

我不知道可以使用简单的自定义属性,所以我试图搜索一些关于这个的来源,我发现只有这个旧的类似问题,其中几乎只注意到(可能的)兼容性问题.

我很惊讶像Kube这样的CSS框架可以使用类似的解决方案,如果浏览器支持可能如此"脆弱"......

所以我的问题是:

1. Kube的方法有多好(=交叉兼容)？
2. 我可以安全地data-attribute用简单的自定义替换我,例如我必须只传递true/false值吗？

最后一个问题可以通过示例更好地描述,因此请替换<span class="foo" data-boo='true'>Black</span>为<span class="foo" boo>Black</span>

可能重复:
IE5中的HTML5自定义数据属性是否"正常"？

使用HTML数据属性是否安全.

例如,如果用户使用IE6作为浏览器,我仍然可以使用该属性并使用javascript检索它吗？

有没有办法在jQuery中选择在数据属性数组中具有特定值的元素？

考虑一下这个html片段:

<li id="person1" data-city="Boston, New York, San Fransisco">
    Person name 1
</li>
<li id="person2" data-city="Los Angeles, New York, Washington">
    Person name 2
</li>

jQuery中选择数据城市属性中所有"纽约"人物的最佳方法是什么？

解决方案应该考虑到某些城市名​​称出现在其他城市名称中(例如2:伦敦,新伦敦)

例2:

<li id="person1" data-city="Boston, London, San Fransisco">
    Person name 1
</li>
<li id="person2" data-city="Los Angeles, Washington, New London">
    Person name 2
</li>

在jQuery中选择数据城市属性中所有"伦敦"的人的最佳方法是什么？不应选择带有"新伦敦"的城市.

在HTML5/JS应用程序中,我们有一些视图,其中包含一些样式,具体取决于data-attribute元素:

喜欢

<li data-level="0"></li>

要么

<li data-level="1"></li>

CSS

li[data-level^="1"] {
  /* some styles */
}

这似乎无处不在page reload.

但是当通过JS以编程方式设置data-attribute时,CSS属性将在所有相关的桌面浏览器中呈现,但不会在移动Safari中呈现.

JS部分看起来像这样:

this.$el.attr('data-level', this.model.getLevel())

关于如何强制应用这些属性的任何想法(刷新/重绘某些东西)？

我想避免使用class属性和不同的类,因为事情比这里显示的更复杂......

我正在data-position通过jQuery在几个div上设置文档的属性.设置肯定有效.例如,在Chrome控制台中调用以下代码即可返回'left'.

$('.card-container').data('position');

但是在CSS中,下面没有做任何事情.

[data-position='left']

data-position="left"然而,div中的硬编码工作正在进行.我究竟做错了什么？谢谢您的帮助

我有这个HTML:

<section id="SSID" data-texts="'Text1', 'Text2', 'Text3'"></section>

我想在jQuery中创建一个Array变量,我的jQuery代码是:

$(document).ready(function() {
    var Selection = $("#SSID").data("texts");
    var Texts = [ Selection ];

    console.log(Texts.length);
});

对于我的例子,我期望的结果是:

Texts[0] = 'Text1'
Texts[1] = 'Text2'
Texts[2] = 'Text3'

......并且数组的长度Texts为3.

但是,我看到的是长度Texts为1并且整个字符串被加载到Texts[0]:

Texts[0] = "'Text1', 'Text2', 'Text3'"

我认为我的问题是由"(引号)字符引起的.如何克服这个问题,实现我的目标？

我有点问题.我有几个按钮,每个按钮都有不同的data-function=""属性.我想执行一个小脚本来检查哪些按钮被点击了.

<a href="#" class="functionButton" data-function="blogFunctionaliteit">Blog</a>
<a href="#" class="functionButton" data-function="offerteFunctionaliteit">Offerte</a>
<a href="#" class="functionButton" data-function="overzichtFunctionaliteit">Offerte</a>

我只想要一个说的脚本

if $(this) has <data-function="blogFunctionaliteit"> { }
if $(this) has <data-function="offerteFunctionaliteit"> { }
if $(this) has <data-function="overzichtFunctionaliteit"> { }
else { // do nothing }

我尝试过很多东西,但一切似乎都没有用,包括

if ($(this).attr('data-function', 'blogFunctionaliteit') { } - 总是会导致yes,因为它只检查对象是否具有第一个参数,而不是检查它们.

提前感谢您编写正确的jQuery代码或建议我使用其他东西.

我添加div到 DOM 如下，

React.createElement("div", { className: "test"});

呈现的 html 应如下所示

<div class="test" data-test>
</div>

我可以data-test在哪里添加createElement？

我有两个元素,具有以下设置:

<span data-placeholder-class="test-class"></span>
<span data-placeholder-template="/some/template.hbs"></span>

我正在使用下划线来遍历包含这些属性之一的任何元素,然后执行相关操作.

目前这样做是这样的

_.each($('[data-placeholder-class], [data-placeholder-template]'), function cb(element) {
  // code goes here
})

我不想定义每个数据属性来循环,而是想知道是否有一种方法可以选择包含公共关键字的所有属性,在本例中为占位符.例如

_.each($('[data-placeholder-*]'), function cb(element) {
  // code goes here
})

任何人都知道这是否可行？

我正在做一张桌子。

document.querySelector('table').addEventListener('click', (e) => {
  console.log(e.target);
  console.log(e.target.dataset.item);
})

td {
  padding: 8px;
  border: 1px solid black;
  background-color: blue;
}

span {
  background-color: red;
  padding: 4px;
}

<table>
  <tr>
    <td data-item="item1"><span>1</span></td>
    <td data-item="item2"><span>2</span></td>
    <td data-item="item3"><span>3</span></td>
    <td data-item="item4"><span>4</span></td>
    <td data-item="item5"><span>5</span></td>
  </tr>
</table>

当我点击蓝色部分时，我可以获得data-item属性。但是当我点击红色部分时，我不能。

我想修复它，如果我点击<span/>，<td/>我想从中获取data-item属性<td />。