Как применять систему рейтинга в цикле foreach для каждого продукта индивидуально?

Question

У меня есть каталог продукции в Еогеасп цикле, мой идентификатор продукта:

$productArray[$key]["ID"] 

У меня есть рейтинговая система, но я не могу найти решение, как применять его для каждого продукта в отдельности, потому что теперь, когда я выбираю звезды в одном продукте, другие звезды также выбраны.

<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> 

Answer 1

Проблема в том, что вы не находитесь в контексте .rate-ex3-cnt item, но глобально. Итак, вам нужно использовать контекст, чтобы найти кнопки ставок.

// $(this).closest('.rate-ex3-cnt').find('.....') ... Это применимо к изменениям только для зависающего контекста rate-btn, а не по всему миру.

$('.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'); 
      }; 
     }); 

Также для функции щелчка, делайте то же самое. Заменить $('.rate-btn').removeClass('...') with $(this).closest('.rate-ex3-cnt').find('.rate-btn').removeClass('...')

Answer 2

Я думаю, вам нужно взять родительский идентификатор DIV, следовательно, он является уникальным для всей продукции и, следовательно, вы можете ориентировать отдельные звезды для продукта

 <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> 

Answer 3

Есть 2 проблемы

1. id selector -> всегда будет вам первым элементом, который соответствует идентификатору.
2. класс для добавления/удаления класса -> он выберет все элементы с соответствующим классом, независимо от рейтингового блока.

Решение

Допустим, у вас есть следующая структура

<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> 

Затем вы можете связать функцию щелчка на ее родителя, а затем могут сегрегации рейтинги продуктов, таких как следующие

$('.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"); 
      } 
    }); 

Для справки - http://plnkr.co/edit/G9bfvlBQjXZ3UUvwOv6a?p=preview