从php for for

Question

你好，我是一名新手开发者，我不确定我做的事情是否真的可行。

我创建了一个砌体画廊。单击图片时，图像下方会显示说明。

画廊工作后我决定循环拍摄照片以“清理代码”，但现在我被卡住了。

我想将类匹配的段落附加到图片类......这可能吗？

  <div class="grid">
    <?php for ($i=1; $i < 5; $i++){ echo "<div class='grid-item $i'><img src='img/classic-$i.png' class='img-responsive'><p class='description hidden $i'></p></div>";
            } ?>

          <p class="description hidden 1">Content description 1</p>
          <p class="description hidden 2">Content description 2</p>
          <p class="description hidden 3">Content description 3</p>

JS

$(document).ready(function () {

var $container = $('#products-content');

$container.masonry({
    gutter: 0,
    itemSelector: '.grid-item',
    columnWidth: '.grid-item',

       }); 

 var $item = $('.grid-item');

     $item.on('click', function(){

    $(this).children().removeClass('hidden');
    $container.masonry();

})