Question

我正在尝试更改用于显示评论图像的代码。先前的代码有5张星图。第一张图片有一颗星星，第二张图片依此类推。每个图像的宽度相同，因此对齐始终正确。使用的代码是

    $p_stars = '<img src="images/stars_' . $rating . '.png">';

上面的结果根据评级会产生一连串的星星，例如

 ****
 *****
 *
 ***

我的想法是将图像替换为超棒的字体图标，以使其更易于控制颜色，如果需要更改颜色或星数，则需要较少的维护。我做到了，它工作正常，但是所花费的代码量远远超过了图像。所以我的问题是：

我应该坚持图片吗？
是否有更好的方法来编写图标方法？

这是图标方法的代码：

    <style>
    .stars {color:#FB9802;}
    .stars-hide {color:#fff;}
    </style>

    $p_stars  = '';
    $p = 0;
    while ($p < 5) {
        for ($x = 0; $x < $rating; ++$x) {
            $p_stars .= '<i class="fas fa-star stars"></i>';
            $p++;
        }
        if ($p == 5) break;

        for ($x = $p; $x < 5; ++$x) {
            $p_stars .= '<i class="fas fa-star stars-hide"></i>';
            $p++;
        }
    }

Answer 1

我应该坚持图片吗？

没有人会为您回答这个问题。您必须自己决定。坚持任何适合您，您的团队和客户的方式。编程中最重要的事情是交流（或者至少我相信）。

我将在评论中加入fyrye的内容，这是非常好的一点：

从标准化和优化方法来看，如果使用Font Awesome，则应广泛使用...比一系列不同的图像更有益...但是，如果仅将其用于星星，则下载它是非常大的资产一次使用。

是否有更好的方法来编码图标方法？

...它所需要的代码量远远超过图像中的代码...

您应该更聪明地工作，而不是::

如果您研究所有可用的PHP数组函数，就会发现array_fill。

现在，与array_merge一起，我们可以创建一个非常优雅且易于维护的代码，与您已经拥有的代码相比，在提交时看起来会好得多：）

看看这个：

$imageShow = '<i class="fas fa-star stars"></i>';
$imageHide = '<i class="fas fa-star stars-hide"></i>';

$rating = 3;

$stars = array_merge(
    array_fill(0, $rating, $imageShow),
    array_fill($rating, 5-$rating, $imageHide)
    );

var_dump($stars);

这是var_dump的结果：

array(5) {
  [0]=>
  string(33) "<i class="fas fa-star stars"></i>"
  [1]=>
  string(33) "<i class="fas fa-star stars"></i>"
  [2]=>
  string(33) "<i class="fas fa-star stars"></i>"
  [3]=>
  string(38) "<i class="fas fa-star stars-hide"></i>"
  [4]=>
  string(38) "<i class="fas fa-star stars-hide"></i>"
}

看到了吗？我将$rating设置为3，结果数组包含3个恒星图像和2个隐藏恒星。

现在，您只需要一个implode调用即可将所有元素连接在一起。我相信，您的生产代码最终将如下所示：

$imageShow = '<i class="fas fa-star stars"></i>';
$imageHide = '<i class="fas fa-star stars-hide"></i>';

$stars = array_merge(
    array_fill(0, $rating, $imageShow),
    array_fill($rating, 5-$rating, $imageHide)
    );

$p_stars = implode("", $stars);

用超赞的字体替换图像

1 个答案: