3

-リンクが削除されました-

forループを使用してJqueryを使用し、上記のWebサイトの数値を星に変換して、いくつもの星を追加し、切り上げ、切り下げ関数を使用するにはどうすればよいですか。

私はこの例を使用して丸めることを好みます：

  • 3.25未満の場合は3.0。これには、3つの完全な星、2つの空の星が含まれます
  • 3.25〜3.75の場合は3.5。これには、3つの完全な星と1つの半分の星、1つの空の星が含まれます
  • 3.75より高い場合は4.0。これには、4つの完全な星、1つの空の星が含まれます
4

1 に答える 1

2

評価のリストを更新して選択可能なコンテナーに入れる必要があります。また、radingを独自のセレクターにカプセル化する必要があります。

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

于 2011-05-31T12:39:35.347 に答える