v2.5.2
Giriş yap

CSS JS BEGENİ animasyonu

burak001
1,315 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

Cevap yaz
Cevaplar (12)
makifgokce
1353 gün önce

ş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");
    }
});
burak001
1353 gün önce

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);
          }
    
        });
    });
burak001
1353 gün önce

Şimdi oldu uzun zamandır tıkandığım sorunum çözüldü sağ olsasın

burak001
1353 gün önce

değiştirip denedim yine olmadı

burak001
1353 gün önce

onu değiştirdiğimde fotnawsomedan gelen kalp gidecek

qplot
1354 gün önce

id="btn" olanı
class=btn"

olarak degıstırıp denermısın

burak001
1354 gün önce

ş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

qplot
1355 gün önce

tahmın ettıgım gıbı buttona class yerıne id vermıssın ondan oluyor

burak001
1355 gün önce

script i döngünün dışında çalıştırıyorum

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

arduinoturkbatu
1355 gün önce

Sadece 1. kartı çalıştırdığın için olabilir;
Benim önerim hepsi için farklı farklı functionlar oluşturup onlara farklı şeyler vermelisin.

makifgokce
1356 gün önce

ilgili kodları buradan paylaşırsan daha kolay yardımcı olurlar bu şekilde kafamızda pek bişey canlanmıyor.