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

Question

У меня есть эти 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"); 
}); 

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

Answer 1

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

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

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