标签: custom-data-attribute

data-*我一直在尝试在语义 UI 下拉列表中附加一个属性option，但没有成功（数据属性没有被复制到生成的下拉选项中）。

这是我的结构select：

超文本标记语言

<select id='my-dropdown' name='department'>
    <option value='1' data-wsg='something'>Department 1</option>
    <option value='2' data-wsg='another'>Department 2</option>
    . . .
    <option value='n' data-wsg='custom data'>Department N</option>
</select>

jQuery

$("#my-dropdown").dropdown({
    allowAdditions: false,
    fullTextSearch: true,
    onHide: function() {
        // Some codes.
    },
    onChange: function(value, text, choice) {
        // Access the data-wsg attribute of the selected option.
    }
});

我已经阅读了一些内容，但我所看到的有关数据属性支持的只是将设置存储在那里。不是我真正需要的。

希望有人做过类似的事情并让我知道解决方案是什么。

我设置了 WordPress 多站点，并尝试在某些 html 标签上保存带有数据属性的页面内容。超级用户可以毫无问题地保存，但是当管理员或较低角色保存时，它会删除标签中的数据属性。有什么方法可以让其他用户角色在html中保存数据属性吗？

需要明确的是，被删除的不是 html 标签本身，而是数据属性，如下所示：

<p data-item="1">String</p>

上面的内容保存为：

<p>String</p>

这也不是一个tinymce问题，我在所见即所得和源视图之间来回扫描切换并且它保留下来，只有当我保存页面时它才会被删除，并且仅适用于低于超级用户的用户多站点。

任何帮助表示赞赏，谢谢！

使用“data-”属性来替换元素（标签）中的“id”属性以进行CSS选择，然后在自动化测试脚本中使用这些“data-*”属性是一个好主意吗？

我有这个 Styled 组件，我试图将来自 props 的DATA属性传递给它。（这是我们在 Stack Overflow 上找到的解决方案）

export const InlineEditReadViewErrorContainer = styled.div.attrs(props => ({
  'data-cy': props.dataCy
}))`
  border: 2px solid #de350b;
  border-radius: 3px;
`;

这就是我在代码中使用这个样式组件的方式

 <InlineEditReadViewErrorContainer dataCy='blabla'>
   {readView}
 </InlineEditReadViewErrorContainer>

但这并没有改变任何事情

如何data使用Modernizr 检测浏览器是否支持HTML5 属性？

我正在使用pushState/hash bangs构建一个基于AJAX的投资组合模块,因为我排除了没有JavaScript的浏览器,唯一让我担心的是HTML自定义数据属性在SEO方面的限制.

例如,使用以下代码:

<ul class="gallery" data-anchor="/photography/example/" data-title="Example"></ul>

数据标题是否会被编入索引,即Google会收集该文本内容吗？或者我是否需要在列表中或周围添加标题标记作为描述性补充？一旦用户点击该特定图库,数据标题就会用作新的窗口标题.

可以通过iframe的内容访问iframe上设置的自定义数据属性吗？

例:

<iframe src="foo.html" data-something="123"></iframe>

有没有办法从iframe的文档访问数据 - 某些东西的价值？

谢谢.

我试图使用jQuery向div 添加" data-bind "属性,如下所示:

var messageViewModel = {
    data: ko.observable({   
        message: response.message, 
        sendDateFmted: response.sendDateFmted, 
        messageId: response.messageId
    })
     };

$("<div>",{
    class:"messageToAndFromOtherMember"
}).data("bind", "template: { name: 'message-template', data: data }").appendTo("#messagesToAndFromOtherMember");

ko.applyBindings(messageViewModel);

KnockoutJs需要" data-bind ".但是我得到的只是这个空div:

<div class="messageToAndFromOtherMember"></div>

请注意,没有这样的属性data-bind,因此div仍为空...

我正在尝试使用jQuery为select元素构造一组选项.除了应该包含的数据属性之外,它正在工作,这似乎被省略了.

这是我的代码:

// cJ is JSON object.
// #currency is my select element.
function makeCurDropDown(cJ) {
    $.each(cJ, function (i) {
        $('#currency').append(
            $('<option></option>').val(i).data("sym", cJ[i][0]).html(cJ[i][1])
        );
    });
}

如何使用jQuery/JavaScript检测data-*某个DOM元素的给定属性是否为空值？常见的比较运算符似乎无法正常工作,如下例所示.一世

可能接近:默认情况下检查没有值的HTML5数据属性或设置data-html5值

但这些答案都不符合这个问题.

HTML

<ul class="list">
  <li class="list--item" data-id="x6gftcc-44">First entry</li>
  <li class="list--item" data-id="">Last entry</li>
</ul>
<div class="message"></div>

一些CSS

.list{
    list-style-type: none;
  }
  .list--item{
    display: inline-block;
    min-width: 200px;
    padding: 20px;
    border: 1px solid rgb(60,64,73);
    cursor: pointer;
  }
  .message{
    display: none;
  }
  .message.active{
    display: block;
  }
  .true{
    color: green;
  }
  .false{
    color: red;
  }

JavaScript

$(document).ready(function(){
  $('.list--item').click(function(event, target){
    function hasId(){
      if ($(this).data('id') != ''){
            return true;
        }
        else{
            return false;
        }
    };
    var entry = { …