Преобразование данных в изображения с использованием JQuery / CSS или, возможно, PHP / CSS. (Система оценок) - PullRequest
Новая
       18

Преобразование данных в изображения с использованием JQuery / CSS или, возможно, PHP / CSS. (Система оценок)

3 голосов
/ 31 мая 2011

- ссылка удалена -

Как я могу преобразовать числа на вышеуказанном веб-сайте в звезды, используя Jquery с циклом for, чтобы добавить как можно больше звезд, и функцию округления вверх-вниз.

Я предпочитаю округлять, используя этот пример:

  • 3,0, если ниже 3,25; это будет включать 3 полные звезды, 2 пустые звезды
  • 3,5, если между 3,25 и 3,75; это будет включать 3 полных звезды и 1 половину звезда, 1 пустая звезда
  • 4,0, если оно превышает 3,75; это будет включать 4 полных звезды, 1 пустую звезду

1 Ответ

2 голосов
/ 31 мая 2011

Вам необходимо обновить список оценок, чтобы он был в выбираемом контейнере, а рейтинг должен быть инкапсулирован в свой собственный селектор.

HTML: 

<ul class="ratings">
  <li>Overall Rating Data (no stars): <span>3.14285714286</span></li>
  <li>Overall Grounds Data (no stars): <span>3.14285714286</span></li>
  <li>Overall Price Data (no stars): <span>3.14285714286</span></li>
  <li>Overall Staff Data (no stars): <span>3</span></li>
  <li>Overall Maintenance Data (no stars): <span>2.85714285714</span></li>
  <li>Overall Noise Data (no stars): <span>3.42857142857</span></li>
  <li>Overall Amenities Data (no stars): <span>3.57142857143</span></li>
  <li>Overall Location Data (no stars): <span>3.28571428571</span></li>
  <li>Overall Parking Data (no stars): <span>3.28571428571</span></li>
  <li>Overall Safety Data (no stars): <span>3</span></li>
</ul>

JS: 

$(document).ready(function() {
  $('ul.ratings li').each(function() {
    var $el = $(this);
    var rating = $el.find('span').text();
    var $stars = $('<div><div class="ratings-stars"></div><div class="ratings-stars"></div><div class="ratings-stars"></div><div class="ratings-stars"></div><div class="ratings-stars"></div></div>');
    var full_stars = Math.floor(rating);
    var half_star = false;
    var remainder = rating - full_stars;

    if(remainder >= 0.25 && remainder <= 0.75) {
      half_star = true;
    } else if(remainder > 0.75) {
      full_stars += 1;
    }   

    $stars.find('div:lt('+full_stars+')').addClass('star');
    if(half_star) {
      $stars.find('div:eq('+full_stars+')').addClass('half-star');
    }

    $el.find('span').replaceWith($stars);
  });
});

CSS я оставлю вам.

РЕДАКТИРОВАТЬ: Обновлено $stars для использования <div /> вместо <span />

...