您能解释一下如何将 html 代码迁移/生成到另一个 html 代码 - PHP 吗？

Question

我有以下 PHP 代码，这个 PHP 代码生成 5 个 li 标签

<?php
function calculate_stars($max, $rating){
    $full_stars=floor($rating);
    $half_stars = ceil($rating-$full_stars);
    $gray_stars = $max-($full_stars + $half_stars);
    return array ($full_stars, $half_stars, $gray_stars);
}

function display_star($rating){
    $output="";
    $number_stars = calculate_stars(5,$rating);
    $full = $number_stars[0];
    $half = $number_stars[1];
    $gray = $number_stars[2];
    $output ='<ul class="star-rating">';
    if($gray)
        for ($i=0;$i<$gray;$i++)
        {
            $output .= '<li class="star-icon">&#9734;</li>';
        }

    if($half){
        $output .= '<li class="star-icon half">&#9734;</li>';
    }

    if($full){
        for($i=0; $i<$full;$i++)
        {
            $output .= '<li class="star-icon full">&#9734;</li>';
        }
    }

    $output .='</ul>';
    return $output;

}

echo display_star(0.3);

exit;
?>

结果：

<ul class="star-rating">
  <li class="star-icon">&#9734;</li>
  <li class="star-icon">&#9734;</li>
  <li class="star-icon">&#9734;</li>
  <li class="star-icon">&#9734;</li>
  <li class="star-icon half">&#9734;</li>
</ul>

关于$half和$full的说明

变量$half添加类class="star-icon half"结果：

变量$full添加类class="star-icon full"结果：

半星相当于：0.51.52.53.54.5

满星相当于：12345

而这一切都是通过以下方式控制的：

echo display_star(0.5);

您可以在php代码中测试here，生成的html代码可以粘贴here查看结果。

---

现在我的问题

如何根据 php display_star(4.5); 的值按照以下顺序生成 10 个 li 标签，尊重它们的数据和类？

在要生成的新代码中，必须在所有 li 类 class="c-rating__item" 和 left 类中交换一个（或传递 li ）和 data-index 按原样顺序，在此方式必须通过 php display_star(0.5); 的这个值生成我的 html 代码。

<ul class="c-rating">
    <li class="c-rating__item is-active left" data-index="0"></li>
    <li class="c-rating__item" data-index="1"></li>
    <li class="c-rating__item left" data-index="2"></li>
    <li class="c-rating__item" data-index="3"></li>
    <li class="c-rating__item left" data-index="4"></li>
    <li class="c-rating__item" data-index="5"></li>
    <li class="c-rating__item left" data-index="6"></li>
    <li class="c-rating__item" data-index="7"></li>
    <li class="c-rating__item left" data-index="8"></li>
    <li class="c-rating__item" data-index="9"></li>
</ul>

中间的星星相当于下面的data-index02468

而is-active类是填充所有星或半星的全局管理器。

如果我们生成一个评级为display_star(3.5); 的html代码，结果应该如下：

<ul class="c-rating">
    <li class="c-rating__item is-active left" data-index="0"></li>
    <li class="c-rating__item is-active" data-index="1"></li>
    <li class="c-rating__item is-active left" data-index="2"></li>
    <li class="c-rating__item is-active" data-index="3"></li>
    <li class="c-rating__item is-active left" data-index="4"></li>
    <li class="c-rating__item is-active" data-index="5"></li>
    <li class="c-rating__item is-active left" data-index="6"></li>
    <li class="c-rating__item" data-index="7"></li>
    <li class="c-rating__item left" data-index="8"></li>
    <li class="c-rating__item" data-index="9"></li>
</ul>

注意：here show two examples full stars and middle star类的css样式要深入了解。

Answer 1

更新：

function calculate_stars($rating){
    // step starting from 0
    return (($rating/0.5)-1);
}

function display_star($rating){
    $output="";
    $step = calculate_stars($rating);
    $output ='<ul class="c-rating">';
    for ($i=0;$i<10;$i++)
    {
        $class = '';
        if($i<=$step)  $class = ' is-active';
        if($i%2 == 0) $class .= ' left';
        $output .= '<li class="c-rating__item'. $class.'" data-index="'.$i.'"></li>';
    }

    $output .='</ul>';
    return $output;

}

echo display_star(3.5);

exit;

说明：考虑从 0 开始的 10 步尺度。每步为 0.5

根据你的问题

• 如果评级是 1 li 的索引 0 和 1 应该有 is-active 类 - 意味着最多步长 = 1 分配 is-active
• 如果评级为 1.5 li 的索引 0,1 和 2 应具有 is-active 类 - 表示达到步长 = 2 分配 is-active
• 如果评级是 3.5 li 的索引 0,1,2,3,4,5,6 应该有 is-active 类 - 意味着最多等级 = 6 分配 is-active

Answer 2

function display_star($rating){
    $output="";
    $max = 10;

    if($rating > 5){return;}

    $num = $rating *2;
    $num_half = ceil($rating) * 2;
    echo $num_half . '<br>';

    $output ='<ul class="c-rating">';

        for($i=0;$i<$num;$i++){
            $class = ($i % 2 == 0) ? "is-active left" : "is-active";
            $output .=  '<li class="c-rating__item ' . $class . '" data-index=' . $i . ' >c-rating__item ' . $class . '</li>';
        }

        $class = ($class != "is-active left") ? "left" : "";

        for($i=$num;$i<$max;$i++){
            $output .=  '<li class="c-rating__item ' . $class . '" data-index=' . $i . ' >c-rating__item ' . $class . '</li>';
            $class = ($class != "left") ? "left" : "";
        }

    $output .='</ul>';

    return $output;

}


echo display_star(2.5);

Answer 3

尝试改变：

$number_stars = calculate_stars(5,$rating);

收件人：

$number_stars = calculate_stars(10,$rating);