如果从服务器加载现有数据,更改图标颜色将失败

zysjyyx4  于 2021-09-29  发布在  Java
关注(0)|答案(1)|浏览(256)

对不起,关于这个问题,我不知道该如何恰当地描述它。
我有一个特定内容的评级系统。评级页面将以模式显示。用户第一次对内容进行评分时,一切正常。如果用户没有从服务器刷新数据,他们可以返回到相同的查看/模式并编辑他们的查看-包括更改评级,从而更改星星的颜色(1到5颗星)。
但是,如果用户刷新数据或首次打开应用程序,从服务器中提取数据,则会打开模式,显示所有正确的评分和他们以前输入的评论-但是如果他们想更改他们以前给它的星级(第一级a) 2 ,然后在新服务器数据加载后,将额定值更改为 4 ),星星上的颜色不会改变,即使从函数中记录的数据显示值为4…视觉上没有任何变化,它仍然只显示两个彩色星星
我正在打印控制台MSG,因为它通过star/rating color函数进行迭代,并且控制台MSG显示所分配的正确颜色……但是星星的实际颜色没有改变。
相关css:

.reviewColor {
  color: lightgray ;
}

模式:

<ion-modal-view class="modalReviews">
  <ion-header-bar>
    <div class="headerBar">
      <div class="headerBarDiv">PRODUCT REVIEW</div>
      <button type="button" class="button button-block button-small-custom headerBarButton" ng-click="closeReviews()"> X </button>
    </div>    
  </ion-header-bar>

  <ion-content>
  <div id="reviewWrapper">
    <div ng-if="doReview == 1" id="doReview" class="prodSection prodReviewCard">
      <div ng-if="prod.reviews.userReviewDate != 0">
        Last review submitted on: {{prod.reviews.userReviewDate}}
      </div>
      <div class="" style="text-align:center;">
        <i class="ion-ios-star reviewColor ratingSize" id="Rating_{{prod.ceID}}_1" ng-click="reviewRating('Rating',prod.ceID,1);" ng-style="1 <= prod.reviews.userRating && {'color' : eColors.orange}"></i>
        <i class="ion-ios-star reviewColor ratingSize" id="Rating_{{prod.ceID}}_2" ng-click="reviewRating('Rating',prod.ceID,2);" ng-style="2 <= prod.reviews.userRating && {'color' : eColors.orange}"></i>
        <i class="ion-ios-star reviewColor ratingSize" id="Rating_{{prod.ceID}}_3" ng-click="reviewRating('Rating',prod.ceID,3);" ng-style="3 <= prod.reviews.userRating && {'color' : eColors.orange}"></i>
        <i class="ion-ios-star reviewColor ratingSize" id="Rating_{{prod.ceID}}_4" ng-click="reviewRating('Rating',prod.ceID,4);" ng-style="4 <= prod.reviews.userRating && {'color' : eColors.orange}"></i>
        <i class="ion-ios-star reviewColor ratingSize" id="Rating_{{prod.ceID}}_5" ng-click="reviewRating('Rating',prod.ceID,5);" ng-style="5 <= prod.reviews.userRating && {'color' : eColors.orange}"></i>
      </div>
      <div style="margin-top:10px;">
        <textarea style="border:1px solid lightgray;width:100%;height:100px;" maxlength="255" ng-model="userReview" id="userReview">{{prod.reviews.userReview}}</textarea>
      </div>
      <div style="margin-top:20px;">
        <input type="checkbox" id="userAnon" ng-model="userAnon" ng-true-value="'{{userDisplayName}}'" ng-false-value="'Anonymous'" style="margin-left:25px;margin-right:5px;vertical-align:bottom;width:20px;height:20px;" ng-checked="prod.reviews.userAnon != 'Anonymous'"></input>Display '{{userDisplayName}}' with review? 
      </div>

      <div style="margin-top:20px;">
        <button type="button" class="button button-block button-large-custom" ng-click="reviewSubmit();">
          Submit Review
        </button>
      </div>
      <div style="margin-top:15px;color:{{reviewColor}};">{{reviewMsg}}</div>
    </div>
  </div>
</ion-content>

控制器可在视觉上改变星形颜色:

$scope.reviewRating = function(idName,ID,rating) {
    for (var i=1;i<=5;i++) {
      var tName = idName+ "_" +ID+ "_" +i ;
      console.log(tName) ;
      var star = document.getElementById(tName) ;
      if (i <= rating) {
        console.log("Orange") ;
        star.style.color = eColors.orange + " !important" ;      
      } else {
        console.log("Gray") ;
        star.style.color = "lightgray !important" ;
      }
    }
    $scope.userRating = rating ;
    console.log("new rating: " +$scope.userRating) ;
  }

函数控制台msgs显示函数正在正确执行,并且正确的值被分配为新的$scope.userrating-但是,从视觉上看,没有任何变化,它仍然只显示两颗星为橙色:

Rating_1135_1 = Orange    controllers.js:2705 
Rating_1135_2 = Orange    controllers.js:2705 
Rating_1135_3 = Orange    controllers.js:2705 
Rating_1135_4 = Orange    controllers.js:2705 
Rating_1135_5 = Gray      controllers.js:2708 
new rating: 4             controllers.js:2712

同样,它只是无法工作,无法更改颜色,如果以前的审阅/数据从服务器加载,如果不存在,它可以正常工作,甚至保存审阅,保留模式…稍后再回来更改审阅-它仍然可以工作。只有当用户刷新数据或从服务器获取新数据且审核已经存在时,才会进行此操作。

kq4fsx7k

kq4fsx7k1#

问题是您无法添加 !important 设置样式属性时( star.style.color = 'lightgray !important'; ).
理想情况下,您应该给它一个类,并给类样式声明一个更高的特殊性,以便它将重写 .reviewColor 没有 !important .
另一个选项是删除内联 !important 因为这被认为是一种不好的做法,只需在没有它的情况下设置样式(只要你没有 !important 在另一个样式规则中,内联样式具有更高的优先级)。
如果你真的需要设置 !important 在内联样式中,可以使用 element.style.setProperty 设定 priority 在第三个参数中:

star.style.setProperty('color', 'lightgray', 'important');

相关问题