JQuery 的 .prop() 不会设置属性

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 上的文档和一些帖子后，我很困惑，但我似乎无法弄清楚问题所在。

我使用 JQuery 3.3.1 版是为了它的值(value)

Answer 1

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

I'm trying to use the prop() function to add a custom attribute

prop() 设置属性，并且不存在“自定义属性”之类的东西。如果您想创建自定义属性，请使用attr() - 但我建议不要这样做，因为这是不好的做法。

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

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

Can I still incorporate this without css? Right now I'm using css rules such as #header-main[error]

这里需要注意的一件事是 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;
}