如何根据变量/用户输入显示产品星级?

sqougxex  于 2021-06-29  发布在  Java
关注(0)|答案(2)|浏览(328)

我正在寻找一种使用springboot/java而不使用设置值来显示星级的方法。如果我知道要显示的值,我可以显示星级,但是如果它是一个基于用户评级平均值的变化数字,我如何传入变量以保持星级最新?我在网上找到的每一个教程要么是接受星级评定的输入,要么就是如何简单地显示星级。
我现在用它作为占位符,显示4.3星。 <div class="Stars" style="--rating: 4.3;" aria-label="Rating of this product is 4.3 out of 5."></div> 我想找到一种方法来使用通过控制器传入的变量名(averageuser rating)来显示这个等级。我怎样才能做到这一点?感谢您的帮助。
我正在编辑以添加style.css它正在计算如何根据--评级填充星星,但这就是我不确定如何传递变量的地方。我想我甚至不需要阿丽亚的标签。

.Stars {
  --percent: calc(var(--rating) / 5 * 100%);
  display: inline-block;
  font-size: var(--star-size);
  font-family: Times;
  line-height: 1;
}
.Stars::before {
  content: '★★★★★';
  letter-spacing: 3px;
  background: linear-gradient(90deg, var(--star-background) var(--percent), var(--star-color) var(--percent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
ldxq2e6h

ldxq2e6h1#

万一有人有同样的问题,我就这样解决了:

<div class="Stars" th:style="|--rating: ${averageRating}|" >
</div>

平均值通过控制器传入。

pes8fvy9

pes8fvy92#

既然你用的是thyemeleaf,

<div class="Stars">
<p style="--rating: 4.3;" th:text="Rating of this product is + ${the_average_user_rating} + out of 5."></p>
</div>

如果你愿意的话,也可以用样式来代替4.3、${the\u average\u user\u rating}或者你从controller传递的任何名称。

相关问题