Блог

Как jQuery различает вызовы функций (например, по щелчку) при использовании идентификаторов переменных элементов?

У меня есть несколько файлов, которые содержатся в таблице, каждая строка содержит флажок и имя файла.

Каждый из этих элементов ввода флажка имеет уникально сгенерированный идентификатор, который является «Item_», за которым следует 5-значный уникальный номер.

В идеале я хотел бы обрабатывать состояние флажка, когда пользователь его выбирает или отменяет. Если бы я использовал следующее для доступа, когда пользователь нажимает на элемент из списка, как бы jQuery отреагировал на установленный / снятый флажок?

 $("#Item_"   file_number).some_function_here();
 

Будет ли jQuery отслеживать элементы на странице, которые имеют идентификатор Item_#### (например, Item_100, Item_1234 и т.д.)? Эти элементы не будут динамическими, поэтому страница будет содержать только элементы, которые являются частью страницы при ее загрузке, поэтому вся информация, необходимая jQuery для обработки, доступна при первой загрузке страницы. Но я хочу избежать создания функции обработки для каждого элемента в списке, чтобы минимизировать размер страницы и сохранить код чистым, чтобы javascript / jquery был одинаковым на всех страницах, и изменялись только элементы файла.

Спасибо вам за любую помощь, которую вы можете оказать.

Как jQuery различает вызовы функций (например, по щелчку) при использовании идентификаторов переменных элементов?

Они хранятся в закрытии внутри внутренних компонентов jQuery. Это не слишком отличается от следующего:

 const getElements = (selector) => {
  const elements = document.querySelectorAll(elements);
  return {
    someFn() {
      // do something with every element in `elements`
    }
  };
};
 

Для того, что вы делаете, похоже, вам следует присвоить каждому элементу имя класса вместо отдельного идентификатора, а затем добавить прослушиватель изменений ко всем элементам с этим классом. Затем this внутренний слушатель будет ссылаться на элемент, который был изменен:

 $('.item').on('change', function() {
  console.log(this); // refers to the input
  console.log('was just changed to', this.checked);
});
 

И затем вы можете соответствующим образом обработать изменение, в зависимости от элемента и состояния флажка.