javascript - 添加评级星级 JavaScript 错误

Question

我正在尝试实现评级系统。

我尝试过:

When user clicks any of the stars, I try to add a class to stars before it and clicked star.

但它为 td 中的所有明星增添了档次

    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <thead>
        <tr>
            <th>&nbsp;</th>
            <th>Rating </th>

        </tr>
        </thead>
        <tbody>

        <tr>
            <td class="hd">usertext1</td>
            <td>&nbsp;</td>

            <td>
                <i class="fa fa-star rating" aria-hidden="true"></i>
                <i class="fa fa-star rating" aria-hidden="true"></i>
                <i class="fa fa-star rating" aria-hidden="true"></i>
                <i class="fa fa-star rating" aria-hidden="true"></i>
                <i class="fa fa-star rating" aria-hidden="true"></i>

            </td>
        </tr>

        <tr>
            <td class="hd">usertext</td>
            <td>&nbsp;</td>

            <td>
                <i class="fa fa-star rating" aria-hidden="true"></i>
                <i class="fa fa-star rating" aria-hidden="true"></i>
                <i class="fa fa-star rating" aria-hidden="true"></i>
                <i class="fa fa-star rating" aria-hidden="true"></i>
                <i class="fa fa-star rating" aria-hidden="true"></i>

            </td>
        </tr>

        <tr>
            <td class="hd">feedback text</td>
            <td>&nbsp;</td>

            <td>
                <i class="fa fa-star rating" aria-hidden="true"></i>
                <i class="fa fa-star rating" aria-hidden="true"></i>
                <i class="fa fa-star rating" aria-hidden="true"></i>
                <i class="fa fa-star rating" aria-hidden="true"></i>
                <i class="fa fa-star rating" aria-hidden="true"></i>

            </td>
        </tr>

        </tbody>
    </table>


    <style>
    .ratingstar{
      color:#FFD700
    }
    </style>
    <script type="text/javascript">
    $('.rating').on('click', function(){
       var sel = $(this);
       var td = sel.parents('td').find('.rating');
       td.each(function(item){
           if($(this)==sel){
             console.log(item);//I tried break here but It throws error

           }
           $(this).addClass('ratingstar');
       })
    });
    </script>

Answer 1

使用链接实际上非常简单:

$('.rating').on('click', function(){
    $(this)                     // Our starting point, we're going left/right of this one
        .addClass('starred')    // Of course, activate the one selected
        .nextAll()              // Select the "unstarred"
        .removeClass('starred') // Deactivate greater ratings not selected
        .end()                  // This cancels the .nextAll() sub-selector, back to this
        .prevAll()              // Get the lower stars
        .addClass('starred')    // Activate them
    ;
});

https://jsfiddle.net/9364fusb/2