.Prop () JQuery не будет устанавливать свойство - PullRequest
Новая
       10

.Prop () JQuery не будет устанавливать свойство

0 голосов
/ 03 июля 2018

Я пытаюсь использовать функцию 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 за то, что стоит

1 Ответ

0 голосов
/ 03 июля 2018

Вы ответили на свой вопрос в первой строке.

Я пытаюсь использовать функцию prop () для добавления пользовательского атрибута

prop() устанавливает свойства , и не существует такой вещи, как ' пользовательское свойство '. Если вы хотите создать собственный атрибут , используйте attr() - однако я бы посоветовал против этого, так как это плохая практика.

Гораздо лучшая идея - хранить пользовательскую информацию в атрибуте data. Другими словами, используйте data()

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

Могу ли я включить это без CSS? Сейчас я использую правила CSS, такие как #header-main[error]

Следует отметить, что метод data() в jQuery вообще не влияет на 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;
}
...