Question

所以基本上我有一个离子移动应用程序。应用程序中的众多模块之一是评论和评级。因此，通过实施这样的模块，我添加了一个星星，用户可以点击是否要通过点击一颗星到五颗星来评价某个用户。所以这里的问题是，一旦选择某个明星，例如5，那么他在应用程序中点击其他部分，星星就会消失。

选择明星后：

并且用户点击星级以外的星级，星级选择将消失。如何解决这样的错误？

以下代码： HTML

    <div class="rating">
<!-- <ion-icon name="star"></ion-icon> -->
<span (click)="rate(5)">☆</span>
<span (click)="rate(4)">☆</span>
<span (click)="rate(3)">☆</span>
<span (click)="rate(2)">☆</span>
<span (click)="rate(1)">☆</span>

CSS

 page-review {
   .rating {
    display: flex;
    justify-content: center;

  }



   .rating>span:hover:before {
   content: "\2605";
     position: absolute;
  }

 .rating {
   unicode-bidi: bidi-override;
    direction: rtl;
   }
  .rating>span:hover:before,
  .rating>span:hover~span:before {
   content: "\2605";
   position: absolute;
  }

  .rating {
   unicode-bidi: bidi-override;
  direction: rtl;
  }
 .rating>span {
   display: inline-block;
   position: relative;
  width: 1.1em;
  font-size: 40px;
  color: #F2AF01;
  }
  .rating>span:hover:before,
  .rating>span:hover~span:before {
   content: "\2605";
   position: absolute;
  }

  p{
  font-size: 20px;
 }

  .review-description{
  margin-bottom: 50px;
}
}

Answer 1

您可以使用ionic-ratings

当您执行所有安装和导入步骤时，您可以像

一样使用它

  $scope.ratingsObject = {
    iconOn: 'ion-ios-star',    //Optional 
    iconOff: 'ion-ios-star-outline',   //Optional 
    iconOnColor: 'rgb(200, 200, 100)',  //Optional 
    iconOffColor:  'rgb(200, 100, 100)',    //Optional 
    rating:  2, //Optional 
    minRating:1,    //Optional 
    readOnly: true, //Optional 
    callback: function(rating, index) {    //Mandatory 
      $scope.ratingsCallback(rating, index);
    }
  };

  $scope.ratingsCallback = function(rating, index) {
    console.log('Selected rating is : ', rating, ' and the index is : ', index);
  };

Answer 2

嗯，你正在使用：hover和一个非常有趣的反向HTML顺序和文本方向切换的组合，以便使用~一般兄弟选择器来填充之前的星星，太棒了。

但你是通过使用CSS实现的：hover，这实际上是指当鼠标悬停在桌面上的元素时。一旦指针离开，：悬停状态就会结束，因此，CSS悬停时应用的任何样式都将消失。

在移动设备上，没有真正的：悬停状态，因为没有鼠标指针开始，但有些引擎使用了水龙头......但是再次，当你点击其他任何地方时，“指针”将不再覆盖元素，所以：悬停状态结束。

我不熟悉离子，但似乎你需要修改你的rate（）方法（或点击时添加另一种方法）来显示当前值。

从CSS的角度来看，一个简单的方法是使用与“悬停状态”相同的CSS“选定”类，您可以在点击时添加到所选元素（如果存在，则从其他元素中删除）。

从CSS的角度来看，应该是这样的：

 .rating>span.selected:before,
  .rating>span.selected~span:before {
   content: "\2605";
   position: absolute;
  }

要保持干燥，您可以将其添加到与设置悬停相同的规则

.rating>span:hover:before,
.rating>span:hover~span:before,
.rating>span.selected:before,
.rating>span.selected~span:before {
   content: "\2605";
   position: absolute;
  }

顺便说一句，你有2个相同的.rating和.rating＆gt; span副本：hover~span：在规则之前，以及3个相同的.rating＆gt; span：hover：在规则之前，你可能也希望清除它

如何修复星级评级css和html

2 个答案: