Сделайте функции JS более эффективными и динамичными

#javascript #jquery

#javascript #jquery

Вопрос:

У меня есть эти 3 функции, которые в настоящее время используются на HTML-странице:

 $('#windowPanel1:first-child').children('div:eq(0)').click(function(){
    $('#edit1').val("1");
});
$('#windowPanel1:first-child').children('div:eq(1)').click(function(){
   $('#edit1').val("2");
});
$('#windowPanel1:first-child').children('div:eq(2)').click(function(){
    $('#edit1').val("3");
});
  

Я хотел бы иметь одну функцию, которая охватывает все эти функции. Какой способ был бы наиболее эффективным? Спасибо!

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

1. Хотя ответ @Tushar будет делать то, что вы после,. Глядя на ваш код, я бы сказал, что это идеальный кандидат для атрибута данных. Особенно, если это больше, чем линейная последовательность, такая как 1,2,3..

Ответ №1:

Привязать событие ко всем div элементам #windowPanel1:first-child прямого потомка element. Используйте index() для получения индекса выбранного элемента. index Возвращаемый индекс основан на нуле.

 $('#windowPanel1:first-child > div').click(function() {
    $('#edit1').val($(this).index()   1);
});
  

> является прямым потомком / дочерним селектором, который будет возвращать те же элементы, что и .children('div') .