0

So far I have designed this function to display rating stars on the front end below every comment:

add_filter( 'comment_text', 'additional_fields' );    
function additional_fields ($below) {
  global $comment;    
if(!get_comment_meta( get_comment_ID(), 'rating', true ) ) {      
$ratsec = '<form action="'.get_permalink().'" method="get" class="comment-form-rating">';    
$ratsec .= '<div id="stars1">
<div class="option starr1">1</div>
<div class="option starr2">2</div>
<div class="option starr3">3</div>
<div class="option starr4">4</div>
<div class="option starr5">5</div>
</div>
<div style="clear:both"></div>';    
    $ratsec .= '<input type="hidden" name="p" value="'.get_the_ID().'"/>';
    $ratsec .= '<input type="text" value="" name="rating['.$comment->comment_ID.']" id="rate22" class="fruit-name"/>';    
    $ratsec .= '<label for="rating">'. __('Rating') . '</label>';    
  $ratsec .= '<input type="submit" value="submit" />';
  $ratsec .= '</form>';
  $below = $below .$ratsec;
  return $below;
}
else
$ratsec = "";
$below = $below .$ratsec;
  return $below;
}

and use this jQuery script:

<script type="text/javascript">
(function($){

   $(document).ready(function() {
    var $option = $('.option');
    var $fruit = $('.fruit-name');
    var $last;
    $option.click(function() {
    $fruit.val(this.innerHTML)
    })
});

})(jQuery);
</script>

Now when I am adding a hovering action in it to make star yellow it is yellowing all the star's of all the comments plus when I am click on any star its value is updated to all the fields below comment.

What I want here is make it work individually for every comment? like if I press 2 star for comment id 33 it should only change the color and the value of comment id 33 field. not all the comments.

2
  • jQuery question. Voting as off topic.
    – RRikesh
    Jun 6, 2013 at 9:57
  • I cant see your code ? please write it in code format ? and its not off topic ? it include wordpress comment system - I am attaching jquerry in there.
    – Cid Ubaid
    Jun 6, 2013 at 10:01

1 Answer 1

1

Replace your jquery with this

<script type="text/javascript">
(function($){

   $(document).ready(function() {
    var $option = $('.option');
    var $fruit = $('.fruit-name');
    var $last;
    var parent
    $option.click(function() {
        parent=$(this).parents('.comment-form-rating');
        $('.fruit-name',parent).val(this.innerHTML)
    })
});

})(jQuery);
</script>

your script not working because .fruit-name not contain correct reference variable.


Updated

for debugging put code and check.

<script type="text/javascript">
    (function($){

       $(document).ready(function() {
        var $option = $('.option');
        var $fruit = $('.fruit-name');
        var $last;
        var parent
        $option.click(function() {
         parent1=$(this).parents('.comment-form-rating');
         parent2=$('.option').parents('.comment-form-rating');
         console.log(parent1);
         console.log(parent2);
         $('.fruit-name',parent1).val(this.innerHTML)
        })
    });

    })(jQuery);
    </script>

in above code,after click any .option class parent1 contain only one value because it is referenced(so only change to one .fruit-name class).but parent2 contain as many as your comment(so change to all .fruit-name class)

6
  • Great - working now - But can you please explain it in a little details in case I need this in future.
    – Cid Ubaid
    Jun 6, 2013 at 11:22
  • In your code.you give click event to all .option class,when .option click you change value of .fruit-name but which so change occurs on all .fruit-name class.but in my code basically i detect parent class of currently click .option class which is .comment-form-rating.and change value of .fruit-name class which lies in current .comment-form-rating class.so change takes place only for one .fruit-name class.sorry for my bad english is it understandable? Jun 6, 2013 at 11:52
  • yes its totally understand able but what I am confused in is - all the comments have same .comment-form-rating class - like all the stars have .option class ? then why now its working ?
    – Cid Ubaid
    Jun 6, 2013 at 12:10
  • see updated part in my answer.is it cool? Jun 6, 2013 at 12:25
  • please update answer with both of your answer that was working and I haven't check this but this is more awsum than the code you type before wow you are a genius dear.
    – Cid Ubaid
    Jun 6, 2013 at 19:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.