Как я могу определить, когда изменяется класс элемента HTML?

<div class="current"></div>
<a href="#">text</a>

Как определить, когда, например, .live класс добавляется к этому <div> и что-нибудь делать, когда это произошло?

Например, если класс изменен, то скройте ссылку.

У меня есть уменьшенный скрипт, который вносит изменения в класс <div>. Он слишком большой для меня, чтобы найти место, где это происходит, поэтому я ищу способ поймать смену класса.


javascript class html jquery css
person James    schedule 17.05.2011    source источник
comment
какой блок? .current?   -  person Naftali aka Neal    schedule 17.05.2011
comment
Тривиальный способ - всегда просто проверять каждые несколько миллисекунд на разницу, используя setInterval.   -  person pimvdb    schedule 17.05.2011
comment
У меня была похожая проблема, но разница в том, что вы хотели отслеживать изменение класса, но мне пришлось проверять изменения атрибутов не только статического элемента dom, но и динамически добавляемого элемента DOM, перейдите по этой ссылке stackoverflow.com/a/58501827/6879925 надеюсь, что это поможет вам получить решение вашего вопроса   -  person Dinesh Gopal Chand    schedule 22.10.2019

Ответы (4)


arrow_upward
12
arrow_downward

Есть события DOM, но они далеки от совершенства и недоступны в большинстве браузеров. Другими словами: Невозможно (надежно). Есть хаки вроде интервалов и проверки на каждой итерации, но если вам нужно сделать что-то подобное, ваш дизайн, вероятно, облажался. Имейте в виду, что такие вещи будут медленными и что всегда будет задержка. Чем меньше задержка, тем медленнее приложение. Не делай этого.

person jwueller    schedule 17.05.2011
comment
Я не очень хорошо помню, но я наткнулся на статью на Mozilla Dev Central, в которой предостерегали от использования этих событий (в основном проблемы с производительностью). - person sitifensys; 17.05.2011
comment
Это НЕ верно, это возможно и надежно, вам просто нужно прослушивать все события DOM и отфильтровывать их. В вашем случае специально слушайте детей тела $(document).on(EVENT,body *, function()); Это будет дорогостоящая операция, поэтому я бы не советовал, но она определенно возможна и надежна. - person Tobias Hagenbeek; 04.08.2015
comment
@TobiasHagenbeek: Какое событие вы бы прослушивали, чтобы обнаруживать изменения атрибутов класса? Насколько мне известно, on() использует всплывающую подсказку событий для обнаружения событий, а не изменений DOM, в дочерних элементах. Однако, если события DOM браузера ненадежны (что они определенно были на момент написания), это не поможет выполнить то, о чем просила OP, не прибегая к интервальным взломам. Некоторые из этих обстоятельств могли измениться, поэтому мне искренне любопытно, как это будет достигнуто. Пожалуйста, дополните. - person jwueller; 07.08.2015
comment
это зависит от того, я полагаю, что в любое время у вас есть контроль над своим кодом, поэтому вы знаете, какие события происходят для добавления класса. Проверьте эту идею gist.github.com/yckart/c893d7db0f49b1ea4dfb - person Tobias Hagenbeek; 07.08.2015
comment
@TobiasHagenbeek: указанный фрагмент изменяет jQuery для запуска пользовательских событий при использовании функций управления классом. Это не будет работать с произвольными изменениями атрибутов класса DOM, а только с теми, которые сделаны через общедоступный API jQuery. Для надежного обнаружения изменений (т. е. независимо от того, вызвал ли изменение ваш собственный код или нет) такие события, как (теперь устаревшие) DOMAttrModified или более новый Mutation Observer API. Однако ни один из них не доступен во всех распространенных в настоящее время браузерах. - person jwueller; 07.08.2015
comment
Извините, но да, фрагменты показывают только jQuery API, но разве вы не знаете, как использовать обычный javascript таким же образом? Это был просто пример, и вы меня сбиваете с толку, вы делаете вид, что не знаете, КАК добавляется класс, это иностранное действие на вашей странице?? Тем не менее, есть событие, которое делает это, выясните, что это такое, и отслеживайте его. - person Tobias Hagenbeek; 07.08.2015
comment
@TobiasHagenbeek: Предлагаемое решение по внедрению пользовательских событий будет только работать, если ваши классы управляются через неродной API-интерфейс (например, jQuery), потому что нет способа надежно прослушивать изменения примитивных свойств в DOM (см. мой предыдущий комментарий). Фрагмент создает пользовательские события, обертывая jQuery API, но опять же, это не работает для примитивных свойств. Если бы библиотека (т. е. внешнее действие) напрямую манипулировала свойством элемента className, не было бы возможности внедрить код, генерирующий соответствующее пользовательское событие, которое вы могли бы прослушать. - person jwueller; 07.08.2015
comment
Мне нравится это обсуждение, но я думаю, что мы смотрим на это с другого направления, я говорю, что даже эти библиотеки запускают вызов для управления DOM, это работа разработчиков, чтобы выяснить, что происходит и где, поэтому вы может надежно сопоставить любое событие, происходящее из API (например, jQuery) или использования примитивных манипуляций, это возвращает меня к тому, что НИКОГДА не может произойти, если вы не имеете никакого контроля над любыми манипуляциями с домом, которые происходят где-либо в ВАШЕМ документе. - person Tobias Hagenbeek; 07.08.2015
comment
Извините @jwueller, с точки зрения разработчика, который не знает / не понимает сценарии, которые он / она использует, вы абсолютно правы, иначе он так же надежен, как и разработчик. - person Tobias Hagenbeek; 07.08.2015
comment
@TobiasHagenbeek: Конечно, можно вручную отслеживать каждую манипуляцию с DOM. Однако я не вижу, как это противоречит моему ответу. Самостоятельное отслеживание изменений DOM будет работать, но это все еще обходной путь для неполной поддержки событий DOM. Это также не решило бы проблему OP, потому что он пытается обнаружить изменения без добавления дополнительного кода в место, где манипулируют атрибутом класса. Надежное прослушивание изменений DOM без корректировки существующего кода кажется невозможным без использования опроса состояния. Если вы не согласны, мне все равно будет очень интересен пример. - person jwueller; 07.08.2015
comment
комментарий без корректировки существующего кода никогда не будет иметь место, я знаю, что вы имеете в виду, но вы всегда корректируете существующий код, независимо от того, добавляете ли вы строку или нет, и я не хотел, чтобы он работал на него, вы сделали вообще утверждение не возможно и не достоверно, это просто нельзя лениться. Но разработчик никогда не должен быть в любом случае. - person Tobias Hagenbeek; 08.08.2015

arrow_upward
2
arrow_downward

Вы можете ознакомиться с следующей статьей, чтобы получить некоторые идеи.

person Darin Dimitrov    schedule 17.05.2011

arrow_upward
2
arrow_downward

Я не знаю, всегда ли класс, который вы добавляете к ссылке, один и тот же, но если да, то почему бы вам использовать для этого CSS.

<style type='text/css>
  .myaddedclass{display:none}
</style>
person jeroen.verhoest    schedule 17.05.2011
comment
да. @Rooney, если все, что вам нужно, это скрыть/показать элементы, изменить цвета или другие атрибуты и т. д., тогда просто нацельте CSS на класс, который вы добавляете, и вам вообще не нужно отслеживать изменения. CSS сделает это за вас. Вот как я обрабатываю скрытие / отображение, пометку текущей выбранной строки и аналогичные проблемы. - person Stephen P; 18.05.2011

arrow_upward
2
arrow_downward

Если вам просто нужно выяснить это один раз (то есть не в коде), веб-инспектор Google Chrome показывает изменения DOM в реальном времени. Не уверен, что это поможет в твоей ситуации.

person Paul D. Waite    schedule 17.05.2011
comment
+1 Вы также можете щелкнуть правой кнопкой мыши узел в (на вкладке «Элементы») и нажать «Разорвать модификацию атрибутов» — это должно остановить JS на правильной строке. (Отмените минимизацию, чтобы получить лучшие разрывы строк: jsbeautifier.org) - person peteorpeter; 17.05.2011
comment
@peteorpeter: о, это действительно удобно, я понятия не имел об этом. - person Paul D. Waite; 18.05.2011
comment
Я только что нашел его (кто знает, сколько времени он там - скрытые обновления Chrome ...) - person peteorpeter; 18.05.2011
comment
@peteorpeter: я знаю. Уже обед? Потому что если это так, то Chrome, вероятно, находится в другой основной версии. - person Paul D. Waite; 18.05.2011