Задача оптимизации кода по обработке кликов
 

Здравствуйте.
Существуют блоки с идентификаторами 1,2,3,...,60,

<div class='matrix-cell' id='1'></div>
<div class='matrix-cell' id='2'>...</div>
<div class='matrix-cell' id='3'>...</div>
...
<div class='matrix-cell' id='60'>...</div>

,при клике не которые выполняется функция по показу дополнительных блоков информации тех товаров, по блокам которых был осуществлен клик.

<div class='product' id='div1'>...</div>
<div class='product' id='div2'>...</div>
<div class='product' id='div3'>...</div>
...
<div class='product' id='div60'>...</div>

Как видно из кода, таких блоков товаров ни много ни мало 60 штук и у меня получилось написать обработку кликов только для каждого из 60 блоков.

$('#1.matrix-cell').click(function() {
        prod(1);
})
$('#2.matrix-cell').click(function() {
    prod(2);       
})
$('#3.matrix-cell').click(function() {
    prod(3);       
})

function prod (p) {
    $('#div'+p+'.product').fadeIn(timeprod);
}

Можно ли оптимизировать jQury-код, чтобы сделать обработку кликов для всех блоков одним действием?

канешно можно! удаляй у всех клики и делай выборку по ихнему классу! и делигируй событие!

тоесть! делаем выборку:

var $matrix = $(".matrix-cell");

теперь делигируем собитие

$matrix.bind("click",function(){});

То есть, эта функция покажет то, по чему мы кликнули? Так зачем это делать, ведь мы не можем кликнуть по тому, чего нет.

Я правда не понимаю, что не так с версткой (уж простите, пожалуйста). И насчет кода тоже не получается. Что нужно сделать с помощью find()?

$(".matrix-cell").click(function () {
    $(this).find('ЧТО ИМЕННО?').fadeIn(200);
})

я сделегировал на body.

$('body').on("click", '.matrix-cell', function(){
     $("#div"+this.id+".product").fadeIn(timeprod);
});