Блог

Главная - Вопросы по программированию - Вызов функции на основе идентификатора в jQuery

Вызов функции на основе идентификатора в jQuery

#jquery #html

#jquery #HTML

Вопрос:

У меня есть следующая функция:

 $('#topic').change(function()

Он работает с идентификатором, который называется #topic . Я хотел бы выполнить это действие с идентификатором, вызываемым 

 #topic_1 or #topic_2 or #topic_3 etc.

Есть ли простой способ сделать это с помощью jQuery, используя подстановочные знаки? Также, как я могу извлечь число 1,2 или 3 и узнать значение другого элемента, помеченного key_1, key_2 или key_3. Я надеюсь, что это имеет смысл для вас.

Извините, это простой вопрос, но я совершенно новичок в jQuery

Комментарии:

1. Прошу прощения. Я немного отредактировал вопрос, и вы все так быстро ответили. Мне нравится идея атрибута, начинающегося с, но как мне затем найти _1 или _2 и добавить это, чтобы создать новый идентификатор других элементов?

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

Ответ №1:

Вы можете использовать, id если хотите (больше вариантов ниже), с помощью селектора «атрибут начинается с»:

 $('[id^="topic"]').change(function() { ... });

Этот селектор будет соответствовать любому id значению, которое начинается с «topic». Обязательно заключите аргумент («topic») в кавычки, это (сейчас) обязательно.

Если у вас есть короткий список из них, вы можете просто перечислить их напрямую:

 $('#topic1, #topic2, #topic3').change(function() { ... });

Или вы могли бы выбрать какую-то другую характеристику, которая у них есть общего. Популярные варианты:

  • Их class , используя селектор класса:

     $('.theClass').change(...);

  • Их расположение в DOM. Например, если вы хотите просмотреть change событие во всех полях формы, вы можете начать с формы и использовать селектор-потомок, возможно, с определителем типа :input (который соответствует элементам input , select и textarea ), например, так:

     $('#formId :input').change(...);

  • Какой-либо другой атрибут, который они совместно используют, используя селектор «атрибут равен», селектор «атрибут содержит» и т.д.

Как вы можете видеть, вам есть из чего выбирать, гораздо больше, чем просто идентификаторы и классы. Обратите внимание, что в большинстве браузеров селекторы классов будут самыми быстрыми, но это действительно имеет значение только на очень сложных страницах или когда вы много просматриваете селекторы. Оптимизируйте, если / когда вы видите проблему, как всегда.

Ответ №2:

Почему бы вместо этого не использовать селектор класса? Присваивает всем элементам класс CSS под названием «topic» и модифицирует ваш код следующим образом:

 $('.topic').change(function() { });

Ответ №3:

Вот так

 $('input[id^="topic"]').val('news here!');

$(input[id^="topic"]).change(function(){

  //Do something

 });

Ответ №4:

используйте атрибут class.. 

 $('.topic').change(function() { });

Ответ №5:

Предпочтительным способом сделать это является использование селектора класса. Однако для произвольных имен вы также можете реализовать нечто подобное этому:

для (i=0;i<бла-бла-бла;i  ){

 $("#topic_" i).изменить(функция() {}); 
}