CSS JS BEGENİ animasyonu
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
$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