Czy możesz wyjaśnić, jak przenieść/wygenerować kod html na inny kod HTML - PHP?

Question

Mam następujący kod PHP kod PHP generuje 5 li tagów

<?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; 
?> 

Wynik:

<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> 

Wyjaśnienie o $half i $full

Zmienna $half class add class="star-icon half" wynik:

Zmienna $full class add class="star-icon full" wynik:

Połowa gwiazda jest odpowiednikiem: 0.51.52.53.54.5

pełnej gwiazdy jest równoznaczne z: 12345

A wszystko to jest sterowane za pomocą:

echo display_star(0.5); 

Można zrobić testy here w kodzie PHP i wygenerowanego kodu HTML można wkleić here aby zobaczyć wyniki.

---

Teraz moje pytanie

Jak mogę wygenerować 10 li tagi w następującej kolejności przestrzegając swoich danych i klas według wartości php display_star(4.5);?

w nowym kodeksie wygenerowania musi mieć we wszystkich li klasy class="c-rating__item" i klasy left zamiana jednego (lub przechodzącej li) i data-index w kolejności, jak to jest w ten sposób musi wygenerować mi kod HTML przez oznacza o wartości php display_star(0.5);.

<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> 

Gwiazdy w środku są równoważne z następującymi danymi-index 02468

I klasa is-active to globalny menedżer wypełniania wszystkich gwiazd lub połowa gwiazdy.

Praktyczny przykład jeśli mamy wygenerować kod HTML ratingu display_star(3.5); wynik powinien być następujący:

<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> 

Uwaga: style css klasy here show two examples full stars and middle star aby dostać się do bardziej dokładnie zrozumieć.

Answer 1

UPDATE:

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; 

Objaśnienie: Rozważmy skalę stopniową 10 rozpoczęcia od 0. każdym kroku to 0,5

Jak na swoje pytanie

• jeśli ocena jest 1 li 's indeksu 0 i 1 powinno mieć is-active klasy - czyli aż do kroku skala = 1 Przypisz is-active
• Jeśli ocena to 1,5 li' s indeks 0,1 i 2 powinny mieć klasę is-active - oznacza skalę do kroku = 2 przypisać is-active
• Jeśli ocena wynosi 3.5 li - indeks 0,1,2,3,4,5,6 powinien mieć klasę is-active - oznacza górę do kroku skali = 6 przypisz is-active

Answer 2

Spróbuj zmienia:

$number_stars = calculate_stars(5,$rating); 

Do:

$number_stars = calculate_stars(10,$rating); 

Answer 3

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);