生成动态OnClick Jquery

Question

我有5个不同类的5个不同的onClick函数我想要做的是运行一个循环，遍历一个数组并动态地为onClick分配类，但是当我们处于循环中时，这就是捕获它只需在每次迭代后替换onclick值，只生成最后一次动态onclick，其余的显然被覆盖！是否有任何方式我可以动态生成独特和单独的5 onclicks因为数据可能会有所不同我可能有七个类..这是javascript

＆＃13;

＆＃13;

$('.demolition-button').click(function(e) {
  $('.tags button').each(function(index, element) {
    $(this).removeClass('tag-active');
  });
  $(this).addClass('tag-active');
  $('.category').each(function(index, element) {
    if ($(this).hasClass('category-active')) {
      $('.category-active').slideUp('slow', function() {
        $(this).removeClass('category-active');
        $('.demolition').slideDown('slow');
        $('.demolition').addClass('category-active');
      })

    }
  });;
});

$('.plumbing-button').click(function(e) {
  $('.tags button').each(function(index, element) {
    $(this).removeClass('tag-active');
  });
  $(this).addClass('tag-active');
  $('.category').each(function(index, element) {
    if ($(this).hasClass('category-active')) {
      $('.category-active').slideUp('slow', function() {
        $(this).removeClass('category-active');
        $('.plumbing').slideDown('slow');
        $('.plumbing').addClass('category-active');
      })

    }
  });
});
$('.painting-button').click(function(e) {
  $('.tags button').each(function(index, element) {
    $(this).removeClass('tag-active');
  });
  $(this).addClass('tag-active');
  $('.category').each(function(index, element) {
    if ($(this).hasClass('category-active')) {
      $('.category-active').slideUp('slow', function() {
        $(this).removeClass('category-active');
        $('.painting').slideDown('slow');
        $('.painting').addClass('category-active');
      })

    }
  });
});
$('.flooring-button').click(function(e) {
  $('.tags button').each(function(index, element) {
    $(this).removeClass('tag-active');
  });
  $(this).addClass('tag-active');
  $('.category').each(function(index, element) {
    if ($(this).hasClass('category-active')) {
      $('.category-active').slideUp('slow', function() {
        $(this).removeClass('category-active');
        $('.flooring').slideDown('slow');
        $('.flooring').addClass('category-active');
      })

    }
  });
});
$('.damage-button').click(function(e) {
  $('.tags button').each(function(index, element) {
    $(this).removeClass('tag-active');
  });
  $(this).addClass('tag-active');
  $('.category').each(function(index, element) {
    if ($(this).hasClass('category-active')) {
      $('.category-active').slideUp('slow', function() {
        $(this).removeClass('category-active');
        $('.damage').slideDown('slow');
        $('.damage').addClass('category-active');
      })

    }
  });
});


The Html

  < section class = "projects" >
  < div class = "container" >
  < h2 > OUR PROJECTS < /h2>
                	<h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eget eros eget velit malesuada tempor.
                     Aliquam libero arcu, ultrices ac scelerisque eu, placerat fringilla est. Integer pellentesque, orci id place                 congue, nibh lectus commodo velit.</h4 >
  < div class = "tags" >
  < div class = "tag-col" >
  < button type = "button"
class = "all-button tag-active" > ALL < /button>
                        </div >
  <? php $sql = "select * from categories";
$run = mysqli_query($db, $sql);
while ($row = mysqli_fetch_array($run)) {



  ?>

＆＃13;

<div class="tag-col">
  <button type="button" class="<?php echo $row['catgeory_name'];?>">
    <?php echo $row[ 'catgeory_name'];?>
  </button>
</div>

</div>
<div class="gallery">
  <div class="service-row category all category-active">
    <img src="images/1.png" />
    <img src="images/2.png" />
    <img src="images/3.png" />
    <img src="images/4.png" />
  </div>
  <div class="service-row category <?php echo $row['catgeory_name'];?>">
    <img src="images/1.png" />
  </div>
  <div class="service-row category <?php echo $row['catgeory_name'];?>">
    <img src="images/4.png" />
  </div>
  <div class="service-row category <?php echo $row['catgeory_name'];?>">
    <img src="images/3.png" />
  </div>
  <div class="service-row category <?php echo $row['catgeory_name'];?>">
    <img src="images/5.png" />
  </div>
  <div class="service-row category <?php echo $row['catgeory_name'];?>">
    <img src="images/2.png" />
  </div>

  <?php ?>
</div>
<a class="hvr-icon-wobble-horizontal">VIEW ALL PROJECTS</a>
</div>
</section>

＆＃13;

＆＃13;

＆＃13;

我可以动态地做这件事吗？提前谢谢