对不起,关于这个问题,我不知道该如何恰当地描述它。
我有一个特定内容的评级系统。评级页面将以模式显示。用户第一次对内容进行评分时,一切正常。如果用户没有从服务器刷新数据,他们可以返回到相同的查看/模式并编辑他们的查看-包括更改评级,从而更改星星的颜色(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
同样,它只是无法工作,无法更改颜色,如果以前的审阅/数据从服务器加载,如果不存在,它可以正常工作,甚至保存审阅,保留模式…稍后再回来更改审阅-它仍然可以工作。只有当用户刷新数据或从服务器获取新数据且审核已经存在时,才会进行此操作。
1条答案
按热度按时间kq4fsx7k1#
问题是您无法添加
!important
设置样式属性时(star.style.color = 'lightgray !important';
).理想情况下,您应该给它一个类,并给类样式声明一个更高的特殊性,以便它将重写
.reviewColor
没有!important
.另一个选项是删除内联
!important
因为这被认为是一种不好的做法,只需在没有它的情况下设置样式(只要你没有!important
在另一个样式规则中,内联样式具有更高的优先级)。如果你真的需要设置
!important
在内联样式中,可以使用element.style.setProperty
设定priority
在第三个参数中: