喜歡喜歡功能AJAX

Question

我有這個jQuery AJAX Like Dislike腳本

<script>
$(function(){ 
    var PostID = <?php echo $PostID;  ?>; 

    $('.like-btn').click(function(){
        $('.dislike-btn').removeClass('dislike-h');    
        $(this).addClass('like-h');
        $.ajax({
            type:"POST",
            url:"rate.php",
            data:'Action=LIKE&PostID='+PostID,
            success: function(){
            }
        });
    });
    $('.dislike-btn').click(function(){
        $('.like-btn').removeClass('like-h');
        $(this).addClass('dislike-h');
        $.ajax({
            type:"POST",
            url:"rate.php",
            data:'Action=DISLIKE&PostID='+PostID,
            success: function(){
            }
        });
    });
});
</script>

現在，我想將此腳本轉換為類似“不喜歡的系統”的多帖子。 我該怎么做？ HTML將如下所示：

<a href="#" onclick="RateSystem(LIKE, 1)">Like</a>
<a href="#" onclick="RateSystem(DISLIKE, 1)">Dislike</a>

LIKE / DISLIKE將動作，1將是喜歡/不喜歡的帖子的ID。 謝謝

Answer 1

你可以做這樣的事情。 每個帖子都是帶有divID和內部兩個控件（像和不喜歡的按鈕）的每個div。 當您單擊-時，函數將獲得帖子ID並隨帖子發送到服務器。 您必須檢查功能的ajax部分。

$(function () {
  $('.like').click(function () { likeFunction(this); });
  $('.dislike').click(function () { dislikeFunction(this);});
});


function likeFunction(caller) {
  var postId = caller.parentElement.getAttribute('postid');
  $.ajax({
      type: "POST",
      url: "rate.php",
      data: 'Action=LIKE&PostID=' + postId,
      success: function () {}
  });
}
function dislikeFunction(caller) {
  var postId = caller.parentElement.getAttribute('postid');
  $.ajax({
      type: "POST",
      url: "rate.php",
      data: 'Action=DISLIKE&PostID=' + postId,
      success: function () {}
  });
}

<div class="post" postid="10">
    <input type="button" class='like' value="LikeButton" /> </input>
    <input type="button" class='dislike' value="DislikeButton"> </input>
</div>

如果您有任何疑問或需要更多幫助，可以問我:)

Answer 2

如果您希望每頁有多個帖子，則可以執行以下操作：

function send(action, id)
{
    var opposite;

    opposite = action === 'like' ? 'dislike' : 'like';

    $('#' + opposite + '-' + id).removeClass(opposite + '-h');
    $('#' + action + '-' + id).addClass(action + '-h');

    $.ajax({
        type:"POST",
        url:"rate.php",
        data:'Action=' + action + '&PostID=' + id,
        success: function(){
        }
    });
}

現在，您只需要正確附加處理程序即可（ $PostID對於循環中的每個帖子都必須不同）：

<a href="#"
    id="like-<?php echo $PostID; ?>"
    onclick="send('like', <?php echo $PostID; ?>)">Like</a>
<a href="#"
    id="disloke-"<?php echo $PostID; ?>"
    onclick="send('dislike', <?php echo $PostID; ?>)">Dislike</a>

那只是代碼的布局，可能會有缺陷。 它與我們開始的地方完全不同，因此只有您可以實際對其進行測試，並查看需要改進的地方。