如何正確使用類似系統的Twitter風格按鈕

我創建了一個類似的系統，用戶可以像其他用戶的帖子..數據被插入到我的數據庫。我唯一的問題是我沒有任何想法如何留下像按鈕，如果用戶喜歡的帖子..導致發生什麼是當用戶喜歡的帖子和刷新頁面按鈕也刷新/返回不像如何正確使用類似系統的Twitter風格按鈕

這是它看起來像我的按鈕的默認圖標是灰色的。當用戶將鼠標懸停在按鈕上時，它會運行動畫，當用戶點擊時它會變成紅色。但由於當用戶打類似按鈕i運行的重載頁面的按鈕，返回到灰..我想我失去了一些東西，但我沒有任何想法如何做到這一點.....

CSS

.coracao{ 
background: url("https://abs.twimg.com/a/1446542199/img/t1/web_heart_animation.png"); 
height: 50px; 
width: 50px; 
background-size: 2900%; 
background-position: left center; 

    top: -30px; 
    left: 0px; 
    position:absolute; 

} 
.coracao.ativo{ 
background: url("https://abs.twimg.com/a/1446542199/img/t1/web_heart_animation.png"); 
height: 50px; 
width: 50px; 
background-size: 2900%; 
background-position: right center; 

    top: -30px; 
    left: 0px; 
    position:absolute; 
    animation: none 0s !important; 
    -moz-animation: none 0s !important; 

} 
.btn:hover .coracao{ 
animation: animationFrames 1.4s steps(28) infinite; 
} 

@keyframes animationFrames{ 
    100%{ 
background-position: -2800px ; 

    } 
}

我想我需要做出一些在這裏我的條件就是沒有什麼做任何想法... 這是按鈕

<div class="btn like"> 
    <div class="boxcoracao"> 
     <span class="coracao" name="like"><br>&emsp;&emsp;&emsp;Love</span> 
    </div> 
</div>&emsp;&emsp;&emsp;

這其中i插入用戶的數據和該文章ID

<script> 
$(".like").click(function(){ 
    if ($('.boxcoracao .coracao',this).toggleClass("ativo")){ 
    togglePost("like"); // run function 
    } else { 
    // update the text to show what the next click would be 
    togglePost("dislike"); // run function 
    } 

function togglePost(action){ 

    $.ajax({ 
     type: "post", 
     url: "", 
     data: "", 
     success: function(data){ 
      window.location.reload(); 
     }, 
     error: function(e){ 
     alert("please try again..."); 
     } 
     }); 
} 

}); 
</script>

來源

2017-04-07 Lion Smith

什麼是重新加載您的ajax成功頁面的原因是什麼？然後使用ajax是沒有意義的。 – ahmet

將它組裝成演示[fiddle]（http://jsfiddle.net）可能會有幫助，以便人們可以嘗試和調試問題。 – tadman

我不知道如何使用小提琴..對不起..但你可以嘗試它我知道它會工作..唯一的問題是有我是如何留下像圖標，即使我重新加載頁面。 –

當查詢所有的職位，你也需要做對活躍用戶的喜好的一個連接，然後設置類似按鈕的內容拉「像」後的狀態基於那個標誌。

我是你的例子，當它加載時沒有PHP來處理頁面。您所要求的功能只有通過使用基於數據庫內容處理頁面輸出的服務器端腳本纔可能實現。

研究PHP web應用程序。純JS，HTML和CSS是無法實現的。

來源

2017-04-08 01:36:32

也只是作爲一個便箋，我提到了很多PHP，但事實證明，您實際上可以使用大量其他語言和Web應用程序框架來處理這類內容。你有很多學習要做，所以你需要做的是研究'編寫Web應用程序'。這應該讓你在你需要的地方。 –

如何正確使用類似系統的Twitter風格按鈕

回答

相關問題