Home / Questions / 256619
Accepted
Miguel
Asked: 2020-04-24 00:31:49 +0800 CST 2020-04-24 00:31:49 +0800 CST

Different JS animation in a foreach

  • 772

I have a foreach where it takes out a kind of CARDS with the token of a center, this token carries the ID="port"to be able to locate it by JavaSCript. The problem is that they are called with the same id and if I go to the first one the others move, but if I go to the second, or third for example, it does nothing.

I guess you have to create a kind of cycle, but automatic, since many records will be created and I can't modify the JS every time a new record is added.

QUERY

<?php
 $results = $mysqli->query("SELECT * FROM centros WHERE estado = 1");
   foreach ($results as $centros){
?>

 <div id="port" class="portfolio valencia center" data-cat="valencia">
    <?php if ($centros['logo']== null) {
       echo "<img src=\"images/centros/cut.svg\" class=\"imgCentro1\">";
       }else {
       echo "<img src=\"images/centros/$logo\"  class=\"imgCentro1\">";
       } ?>
 </div>

<?php } ?>

JAVASCRIPT

  $( "#port" ).mouseenter(function() {
    $('.imgCentro1').css("transform"," rotate(-45deg)");
    $('.imgCentro1').css("transition","1s");
  });
  $( "#port" ).mouseleave(function() {
    $('.imgCentro1').css("transform"," rotate(0deg)");
    $('.imgCentro1').css("transition","1s");
  });
php

1 Answers

  1. Best Answer

    The problem you have is that the IDis a unique identifier that should never be repeated within the same page. If you break that concept, the browser will not behave as expected.

    What I would do is select the elements by class instead of by id when binding the events to them mouseenter()and mouseleave()then use the identifier thisto reference the element on which the event is executing.

    HTML

    //Se le quitó la id para añadirle la clase "port"    
<div class="portfolio valencia center port" data-cat="valencia">
    <div class="cabeceraCentro"></div>
</div>

    JQUERY

    $( ".port" ).mouseenter(function() {
    $(this).find('.imgCentro1').css("transform"," rotate(-45deg)");
    $(this).find('.imgCentro1').css("transition","1s");
});

$( ".port" ).mouseleave(function() {
    $(this).find('.imgCentro1').css("transform"," rotate(0deg)");
    $(this).find('.imgCentro1').css("transition","1s");
});
    • 3