i have 5 different onclick functions of 5 different classes want run loop,iterate through array , assign classes onclick dynamically,but here's catch while in loop replaces the onclick value after every iteration , last dynamic onclick generated , rest overwritten! there way can generate unique , seperate 5 onclicks dynamically because data may vary might have 7 classes..here javascript
$('.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'); }) } }); }); 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" > < /button> </div > <? php $sql = "select * categories"; $run = mysqli_query($db, $sql); while ($row = mysqli_fetch_array($run)) { ?><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 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 projects</a> </div> </section>can somehow dynamically? in advance
Comments
Post a Comment