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
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (12)
şu kodu dene
$(".btn").click(function(){
let btn = $(this).children('i.fa-heart');
if(btn.hasClass("far")){
btn.removeClass("far").addClass("fas");
}else{
btn.removeClass("fas").addClass("far");
}
});
peki kartların id sini alıp beğeni php dosyama nasıl göndereceğim dizi oluşturmayı denedim fakat yapamdım
$(".btn").click(function(){
var yazi_sira = $("#yazi_sira").val(); //bunu bu şekilde text kutularından almayı denedim olmadı kesinlikle dizi gerekiyor
let btn = $(this).children('i.fa-heart');
if(btn.hasClass("far")){
var durum = 1;
btn.removeClass("far").addClass("fas");
}else{
var durum = 0;
btn.removeClass("fas").addClass("far");
}
$.ajax({
url:"pages/begeni.php",
data:{"durum":durum,"yazi_sira":yazi_sira},
type:"POST",
success:function(m){
alert(m);
}
});
});
şu an ki kodlar şöyle
<a class="btn">
<i id="kalp" class="far fa-heart"></i><label style="font-size:22px;font-weight:200;color:gray;" ><?php echo $begenkess?></label>
</a>
<script>
var btn = document.getElementById('kalp');
$(".btn").click(function(){
if(btn.classList.contains("far")){
btn.classList.remove("far");
btn.classList.add("fas");
}else{
btn.classList.remove("fas");
btn.classList.add("far");
}
});
</script>
ama yine çalışmı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
Sadece 1. kartı çalıştırdığın için olabilir;
Benim önerim hepsi için farklı farklı function
lar oluşturup onlara farklı şeyler vermelisin.
ilgili kodları buradan paylaşırsan daha kolay yardımcı olurlar bu şekilde kafamızda pek bişey canlanmıyor.