如何用PHP实现Jquery-upvote插件

Question

I have a jQuery plugin up vote in my project. I want to have a up and down vote functionality like stack overflow but I am total confused on how to pass values through the above up vote plugin function to my php file. I have tried to pass my id param in the Ajax but I am only getting the id of the first row. I used to use on-click event handler and so that I can track which row is been clicked but I can't implement that method with this function. Or someone can explain how do I implement the above jQuery plugin with php on my page.

My HTML in php for loop:

  $sample = $this->db->prepare("SELECT * from Ratings");
  $sample->execute();
  $RES = $sample->fetchAll(PDO::FETCH_ASSOC); 
  foreach ($RES as $data){

      $upVote =  $data['Upvote'];
      $downvote =  $data['Downvote'];
      $counter = $data['Counter'];

echo '<tr>

        <td>
        <div value='.$id.' name="id" class="upvote upvoteForm upvote-serverfault">
         <a class="upvote">'.$upVote.'</a>
                <span class="count">'.$counter.'</span>
                 <a class="downvote">'.$downvote.'</a>
                 <a class="star"></a>
       </td></tr>';
    }

My jquery function :

<script>
var callback = function(element) {
    $.post(
     "voting.php/",
     {
         id: $(".id").val(),
         upvoted: $(".upvote").val(),
         downvoted:  $(".downvote").val(),
         star: $(".star").val()
     },
   );
};
$('.upvoteForm').upvote({callback});

</script>

Answer 1

Check out the Initialization examples in the doc . the callback method receives an object, which holds the data of the currently voted element. Don't try to retrieve the values with jQuery selectors, use the element parameter. And if I understand the documentation correctly, you can even omit the data object completely if you keep the DOM structure and add a data-id attribute:

<div data-id="'.$id.'" class="upvote upvoteForm upvote-serverfault">

var callback = function(element) {
    $.post(
         "voting.php/",
         // this object could probably be omitted
         {
             id: element.id,
             upvoted: element.upvoted,
             downvoted:  element.downvoted,
             star: element.star
         },
    );
};
$('.upvoteForm').upvote({callback: callback});

Note: I have not tested this, no guarantee that it works :-)