Question

我正在尝试使用JQuery .prop()函数将自定义属性添加到元素，但无济于事。这是我尝试过的：

var header = $(document.getElementById("header-main"));
if (header.prop('error')) {
  //do something
}
else {
  $('#header-main').prop('error', true);
  header.prop('error', true);
  //neither of these change the element
  header.html('Changes some text'); //.html() actually seems to work.
}

自从阅读了文档和有关StackOverflow的一些帖子后，我感到非常困惑，但是我似乎无法弄清问题所在。

我正在使用3.3.1版本的JQuery

Answer 1

您已经在第一行回答了您的问题。

我正在尝试使用 prop（） 函数添加自定义的属性
>

prop()设置了 properties ，没有“ 自定义属性”这样的东西。如果您想创建自定义的属性，请使用attr()-但是我建议您不要这样做，因为这是一种不好的做法。

更好的主意是将自定义信息存储在data属性中。换句话说，使用data()

var $header = $('#header-main');
if ($header.data('error')) {
  // do something
}  else {
  $header.data('error', true).html('Changes some text');
}

在没有CSS的情况下我仍然可以合并吗？现在，我正在使用诸如#header-main[error]
之类的CSS规则

这里要注意的一件事是jQuery的data()方法根本不影响DOM。当您需要DOM更新，以便CSS属性选择器可以工作时，请改用attr('data-error')：

var $header = $('#header-main');
if ($header.attr('data-error') == 'true') { // ugly comparison, but not much we can do about it
  // do something
}  else {
  $header.attr('data-error', 'true').html('Changes some text');
}

#header-main[data-error] { 
  color: #C00;
}

jQuery的.prop（）不会设置属性

1 个答案: