Question

我在foreach循环中有一个产品目录，我的产品ID是：

.bin

我有一个评级系统，但我无法找到解决方案如何将它单独应用于每个产品，因为现在当我在一个产品中选择星星时，其他星星也会被选中。

$productArray[$key]["ID"]

Answer 1

问题在于您不在.rate-ex3-cnt项目的上下文中，而是在全局范围内。因此，您需要使用上下文来查找费率按钮。

// $(this).closest('.rate-ex3-cnt').find('.....') ... 这仅对hovered 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的父ID，因此它对所有产品都是唯一的，因此您可以针对产品定位单个明星

     <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个问题

ID选择器 - ＆gt;将始终为您提供与id匹配的第一个元素。
添加/删除课程的课程 - ＆gt;它将选择匹配类的所有元素，而不考虑评级块。

<强>解决方案

我们假设您有以下结构

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

然后，您可以将click函数绑定到其父级，然后可以分隔产品的评级，如下面的

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

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

3 个答案: