Question

我正在试图弄清楚如何编写一个带有元素+得分的javascript函数，并使用jQuery addClass和removeClass来显示正确的星级（舍入到最接近的半星）但是有问题......当我使用“全明星”系统时，我使用了这个系统：

function() {
    $(this).prevAll().andSelf().addClass('active');  
    $(this).nextAll().removeClass('active');
}

这对于半星系统不再适用。有人有建议吗？这是我现在使用的代码：

function populateStars(stars, score) {
    // Stars refers to the <ul> container with <li> stars inside (see later code).
    // This function should use stars (container) and score (rating between 1-5) to display stars
}

这是“stars”var引用的元素的示例：

<ul class="big-stars">
    <li class="star-1 full">1</li>
    <li class="star-2 full">2</li>
    <li class="star-3 half">3</li>
    <li class="star-4">4</li>
    <li class="star-5">5</li>
</ul>

控制星是满，空还是半满的CSS。

.big-stars li {
    text-indent: -9999px;
    width: 49px;
    height: 46px;
    background: url('../images/big_star_empty.png');
    }
.big-stars .full {
    background: url('../images/big_star_full.png'); 
    }
.big-stars .half {
    background: url('../images/big_star_half.png'); 
    }

Answer 1

function populateStars (stars, score)
{
    // Get the number of whole stars
    var iWholeStars = Math.floor(score);
    // Do we want a half star?
    var blnHalfStar = (iWholeStars < score);

    // Show the stars
    for (var iStar = 1; iStar <= iWholeStars; iStar++)
    {
        $('li.star-' + iStar, stars).addClass('full');
    }

    // And the half star
    if (blnHalfStar)
    {
        $('.star-' + iStar, stars).addClass('half');
    }
}

populateStars($('.big-stars'), 3.5)

显然，这可以通过将变量声明直接移动到它们被使用的位置来缩小。

编辑：JSFiddle链接:) http://jsfiddle.net/G8kwb/
编辑2：JSFiddle链接，舍入到最接近的半数：http://jsfiddle.net/G8kwb/8/

Answer 2

这是另一种可能性，使用一些jQuery lt和eq选择器：

function populateStars (stars, score)
{
   //round to nearest half
   score = Math.round(score * 2) / 2;

   var scoreParts = score.toString().split('.');
   $(stars + ' li:lt('+ scoreParts[0]+')').addClass('full');

   if(scoreParts[1])
   {
       $(stars + ' li:eq('+ scoreParts[0] +')').addClass('half');
   }
}

populateStars('.big-stars', 3.5);

您需要将父类而不是实际对象传递给方法，但这对您来说是一个有趣的选项。

编辑：这是一个更新的四舍五入的小提琴：jsFiddle，感谢Joe的初始版本！

此外，我在这个有趣的相关问题中找到了舍入逻辑 - Turn a number into star rating 。

Answer 3

这是我想出的，它可以帮助任何人（对字体使用fontawesome，但是可以替换样式元素：

In file included from /usr/include/boost/predef/os/windows.h:11,
             from /usr/include/boost/predef/platform/windows_runtime.h:13,
             from /usr/include/boost/smart_ptr/detail/yield_k.hpp:28,
             from /usr/include/boost/smart_ptr/detail/spinlock_std_atomic.hpp:18,
             from /usr/include/boost/smart_ptr/detail/spinlock.hpp:47,
             from /usr/include/boost/smart_ptr/detail/spinlock_pool.hpp:25,
             from /usr/include/boost/smart_ptr/shared_ptr.hpp:36,
             from /usr/include/boost/shared_ptr.hpp:17,
             from /usr/include/boost/date_time/time_clock.hpp:17,
             from /usr/include/boost/date_time/posix_time/posix_time_types.hpp:10,
             from /usr/include/boost/asio/time_traits.hpp:23,
             from /usr/include/boost/asio/detail/timer_queue_ptime.hpp:22,
             from /usr/include/boost/asio/detail/deadline_timer_service.hpp:29,
             from /usr/include/boost/asio/basic_deadline_timer.hpp:24,
             from /usr/include/boost/asio.hpp:25,
             from ~/TestApp/main.cpp:18:
/usr/include/boost/predef/os/bsd.h:85:5: error: missing expression between '(' and ')'
   85 | #if BOOST_OS_BSD

使用半星在JavaScript中填充五星系统

3 个答案: