v2.5.2
Giriş yap

CSS JS BEGENİ animasyonu

burak001
1,316 defa görüntülendi ve 3 kişi tarafından değerlendirildi

sitemin anasayfasında kartları listeliyorum kartların düzeni
üstte ana resim
ortada açıklama
altta ise begeni

tüm kartlarımı veri tabanından id numarasına göre foreach ile listeliyorum
sorunum şu begeni butonu tasarladım js ve css ile animasyon yaptım

fakat;
listelenen kartlarda sadece 1 tanesindeki animasyon çalışıyor 4. karta tıkladığımda bile
yine ilk karttaki beğeni animasyonu çalışıyor

burak001
1355 gün önce

$ben = @$_SESSION['id'];

$vericek = $con->prepare("SELECT * FROM geziler ORDER BY okunma DESC");
$vericek->execute(array());
$row = $vericek->fetchAll(PDO::FETCH_ASSOC);
foreach($row as $benzet){
    $id = $benzet["id"];
    $yazisira = $benzet["yazi_sira"];
    $begeni = $benzet["begen"];

    if($begeni>999 && $begeni<9999){
        $veri = number_format($begeni);
        $begenkess = substr($veri,0,3)."K";
    }
    else if($begeni>9999 && $begeni<99999){
       $veri = number_format($begeni);
       $begenkess = substr($veri,0,4)."K";
    }
    else if($begeni>99999 && $begeni<999999){
       $veri = number_format($begeni);
       $begenkess = substr($veri,0,5)."K";
    }
    else if($begeni>999999 && $begeni<999999999){
       $veri = number_format($begeni);
       $begenkess = substr($veri,0,3)." Ml";
    }
    else{
      $begenkess = $begeni." kişi beğendi";
    }
   
    
    $kayitvericek = $con->prepare("SELECT * FROM kayit WHERE id=$id");
    $kayitvericek->execute(array());
    $row1 = $kayitvericek->fetchAll(PDO::FETCH_ASSOC);
   
    foreach($row1 as $kayitbenzet){
        $begeniverial = $con->prepare("SELECT * FROM begeniler WHERE begenen_id=? AND begenilen_id=?");
        $begeniverial->execute([$ben,$id]);
        $begenirow = $begeniverial->rowCount();   
        ?>
        <a id="yazi_link" href="index.php?islem=yazilarim&id=<?php echo $benzet["yazi_sira"]?>">
        <div class="icerik">
        <img src="<?php echo $benzet["res1"]?>" class="icerik_resim"></img>
        <h3 class="baslikA"><?php echo $benzet["baslik"] ?></h3>
        <p class="icerik_text"><?php echo $benzet["aciklama"] ?></p>
       
        <?php if($_SESSION){?>
        
        <?php if($begenirow>0){?>
         <a href="#">
            <i onclick="Toggle()" id="btn" style="color:#f50057;" class="fas fa-heart"></i>
            </a>
        <?php } else if($begenirow==0){?>
               
           <a href="#">
            <i onclick="Toggle()" id="btn" class="far fa-heart"></i>
            </a>

     
        <?php } ?>
        <script>
var btn = document.getElementById('btn');

function Toggle(){
    if(btn.classList.contains("far")){
    btn.classList.remove("far");
    btn.classList.add("fas");
    }else{
    btn.classList.remove("fas");
    btn.classList.add("far");
    }
}
</script>

        <?php }else{?>
        <label class="contactP"><a style="text-decoration:none;margin:0px;margin-left:6px;color:gray;" href="index.php?islem=giris"><b>Giriş yap</b></a></label>
        
        <?php } ?>
        <label class="tar"><?php echo timeConvert($benzet["tar"])?></label>
        <label class="ads"><?php echo $kayitbenzet["ads"]?></label>
        </a>
        </div>
  

        
      


      
<?php }} ?>

kodları şöyle atayım belki farklı birşeyler canlanır