如何在foreach循环中为每个产品单独应用评级系统？

I have a product catalog in foreach loop, my product id is:

$productArray[$key]["ID"]

I have a rating system, but i can't find solution how to apply it for every product individually, because now when I select stars in one product, other stars also are selected.

<div class="rate-ex3-cnt" id="<?php echo $productArray[$key]["ID"];?>

            <div id="1" value="1" class="rate-btn-1 rate-btn"></div>
        <div id="2" value="2" class="rate-btn-2 rate-btn"></div>
        <div id="3" value="3" class="rate-btn-3 rate-btn"></div>
        <div id="4" value="4" class="rate-btn-4 rate-btn"></div>
        <div id="5" value="5" class="rate-btn-5 rate-btn"></div>
    </div>

   <script>
        // rating script
        $(function(){ 
            $('.rate-btn').hover(function(){
                $('.rate-btn').removeClass('rate-btn-hover');
                var therate = $(this).attr('id');
                for (var i = therate; i >= 0; i--) {
                    $('.rate-btn-'+i).addClass('rate-btn-hover');
                };
            });

        $('.rate-btn').click(function(){    
            var therate = $(this).attr('id');
            var dataRate = 'act=rate&post_id=<?php echo $post_id; ?>&rate='+therate; //
            $('.rate-btn').removeClass('rate-btn-active');
            for (var i = therate; i >= 0; i--) {
                $('.rate-btn-'+i).addClass('rate-btn-active');
            };
            $.ajax({
                type : "POST",
                url : "http://localhost/rating/ajax.php",
                data: dataRate,
                success:function(){}
            });

        });
    });
</script>

The problem is that you are not in context of .rate-ex3-cnt item, but globally. So you need to use context to find rates buttons.

// $(this).closest('.rate-ex3-cnt').find('.....') ... This apply the changes only for hovered rate-btn context, not globally.

$('.rate-btn').hover(function(){
            $(this).closest('.rate-ex3-cnt').find('.rate-btn').removeClass('rate-btn-hover');
            var therate = $(this).attr('id');
            for (var i = therate; i >= 0; i--) {
                $(this).closest('.rate-ex3-cnt').find('.rate-btn-'+i).addClass('rate-btn-hover');
            };
        });

Also for the click function, do same things. Replace $('.rate-btn').removeClass('...') with $(this).closest('.rate-ex3-cnt').find('.rate-btn').removeClass('...')

I think you need to take parent id of the div hence it is unique for all product and hence you can target individual star for product

     <script>
                // rating script
                $(function(){ 

                    $('.rate-btn').hover(function(){
  var Id=$(this).parents(".rate-ex3-cnt").attr("id);//Take parent Id
                    $("#"+Id+ '.rate-btn').removeClass('rate-btn-hover');
                    var therate = $(this).attr('id');
                    for (var i = therate; i >= 0; i--) {
                        $("#"+Id+ '.rate-btn-'+i).addClass('rate-btn-hover');
                    };
                });

                $('.rate-btn').click(function(){   
       var Id=$(this).parents(".rate-ex3-cnt").attr("id); //Take Parent Id
                    var therate = $(this).attr('id');
                    var dataRate = 'act=rate&post_id=<?php echo $post_id; ?>&rate='+therate; //
                    $("#"+Id+ '.rate-btn').removeClass('rate-btn-active');
                    for (var i = therate; i >= 0; i--) {
                        $("#"+Id+ '.rate-btn-'+i).addClass('rate-btn-active');
                    };
                    $.ajax({
                        type : "POST",
                        url : "http://localhost/rating/ajax.php",
                        data: dataRate,
                        success:function(){}
                    });

                });
            });
        </script>

There are 2 problems

1. id selector -> will always get you the first element that matches the id.
2. class for adding/removing class -> it will select all elements with matched class irrespective of the rating block.

Solution

Let us say you have the following structure

<div class="rating">
      <div data-value="1" class="rate-btn-1 rate-btn">1</div>
      <div data-value="2" class="rate-btn-2 rate-btn">2</div>
      <div data-value="3" class="rate-btn-3 rate-btn">3</div>
      <div data-value="4" class="rate-btn-4 rate-btn">4</div>
      <div data-value="5" class="rate-btn-5 rate-btn">5</div>
   </div>
   <div class="rating">
      <div data-value="1" class="rate-btn-1 rate-btn">1</div>
      <div data-value="2" class="rate-btn-2 rate-btn">2</div>
      <div data-value="3" class="rate-btn-3 rate-btn">3</div>
      <div data-value="4" class="rate-btn-4 rate-btn">4</div>
      <div data-value="5" class="rate-btn-5 rate-btn">5</div>
   </div>

Then you can bind the click function to its parent and then can segregate ratings of products like following

$('.rating').click(function(event){
      var value = $(event.target).data("value");
       for (var i = value; i >= 0; i--) {
                $(this).find('.rate-btn-'+i).css("color", "red");
            }
  }); 

For reference - http://plnkr.co/edit/G9bfvlBQjXZ3UUvwOv6a?p=preview