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.
}

阅读文档和 Whosebug 上的一些帖子后，我感到很困惑，但我似乎无法弄清楚问题所在。

我正在使用 JQuery 版本 3.3.1 的价值

Answer 1

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

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

prop() 设置 properties 并且没有“custom 属性”这样的东西。如果您想创建自定义属性，请使用 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;
}

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

JQuery's .prop() won't set a property

jquery

prop

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

JQuery's .prop() won't set a property

jquery

prop

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