javascript - 如果标量变量 > 0，Perl 更改图像/css

Question

我有一个带有通知系统的 header ，它在 mail1.png 旁边用一个整数实现，如下所示:

<div class = "header">
     <a class="notifications-dropdown-trigger"><b id="num-posts"><%= (scalar @post_regular) %></b> <img src="/images/icons/mail1.png" /></a>
</div>

标量@post_regular 检索数据库中该用户的通知数量并将其显示为整数。

只要 scalar @post_regular 大于 0，我想实现一些东西来改变它旁边的图像以及数字的背景颜色。所以当用户在至少一个通知，我希望它旁边的图像显示 mail2.png 而不是 mail1.png 并且背景颜色是 red默认值。

我假设这种方法应该用 javascript 来解决？我不太熟悉它，也不确定如何处理它。

Answer 1

只需将逻辑添加到您的 img src 中:

<img src="/images/icons/mail<%= @post_regular ? 2 : 1 %>.png" />

可以使用类似的功能来调整样式，但我可能建议注入(inject)一个辅助类来设置背景颜色，而不是对样式进行硬编码。