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

How to apply rating system in foreach loop for every product individually?

本文关键字：单独 应用 系统 foreach 循环      更新时间：2023-09-26

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

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

问题是，您不是在.rate-exc3-nt项的上下文中，而是全局的。因此，您需要使用上下文来查找费率按钮。

//$(this).closest('.rate-ex3-cnt').find('.....') ...这仅适用于悬停速率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('...')

有2个问题

  1. id选择器->将始终为您获取与id匹配的第一个元素
  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

我认为您需要获取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>
相关文章：