javascript - 组合多个悬停功能

Question

我是 jQuery 的新手，我想知道是否有更好的方法来编写我在下面编写的 jQuery 代码。

我想知道我是否可以使代码更精简，而不是为每个悬停效果编写一个基本上做同样事情的函数。

HTML:

<form action="" method="post" class="rating-choice empty">
    <ul>
        <li class="one">
            <label><input type="radio" value="0.5" name="rating" id="rating-1" />0.5 stars</label>
        </li>
        <li class="two">
            <label><input type="radio" value="1" name="rating" id="rating-2" />1 star</label>
        </li>
        <li class="three">
            <label><input type="radio" value="1.5" name="rating" id="rating-3" />1.5 stars</label>
        </li>
        <li class="four">
            <label><input type="radio" value="2" name="rating" id="rating-4" />2 stars</label>
        </li>
        <li class="five">
            <label><input type="radio" value="2.5" name="rating" id="rating-5" />2.5 stars</label>
        </li>
        <li class="six">
            <label><input type="radio" value="3" name="rating" id="rating-6" />3 stars</label>
        </li>
        <li class="seven">
            <label><input type="radio" value="3.5" name="rating" id="rating-7" />3.5 stars</label>
        </li>
        <li class="eight">
            <label><input type="radio" value="4" name="rating" id="rating-8" />4 stars</label>
        </li>
        <li class="nine">
            <label><input type="radio" value="4.5" name="rating" id="rating-9" />4.5 stars</label>
        </li>
        <li class="ten">
            <label><input type="radio" value="5" name="rating" id="rating-10" />5 stars</label>
        </li>
    </ul>
</form>

jQquery:

$(document).ready(function(){
    $('.one').hover(
        function(){
            $('.rating-choice').prevAll().addBack().addClass('rating-1');
            $('.rating-choice').nextAll().removeClass('empty');
        },
        function(){
            $('.rating-choice').prevAll().addBack().removeClass('rating-1');
        }
    );

    $('.two').hover(
        function(){
            $('.rating-choice').prevAll().addBack().addClass('rating-2');
            $('.rating-choice').nextAll().removeClass('empty');
        },
        function(){
            $('.rating-choice').prevAll().addBack().removeClass('rating-2');
        }
    );

    $('.three').hover(
        function(){
            $('.rating-choice').prevAll().addBack().addClass('rating-3');
            $('.rating-choice').nextAll().removeClass('empty');
        },
        function(){
            $('.rating-choice').prevAll().addBack().removeClass('rating-3');
        }
    );

    $('.four').hover(
        function(){
            $('.rating-choice').prevAll().addBack().addClass('rating-4');
            $('.rating-choice').nextAll().removeClass('empty');
        },
        function(){
            $('.rating-choice').prevAll().addBack().removeClass('rating-4');
        }
    );

    $('.five').hover(
        function(){
            $('.rating-choice').prevAll().addBack().addClass('rating-5');
            $('.rating-choice').nextAll().removeClass('empty');
        },
        function(){
            $('.rating-choice').prevAll().addBack().removeClass('rating-5');
        }
    );

    $('.six').hover(
        function(){
            $('.rating-choice').prevAll().addBack().addClass('rating-6');
            $('.rating-choice').nextAll().removeClass('empty');
        },
        function(){
            $('.rating-choice').prevAll().addBack().removeClass('rating-6');
        }
    );

    $('.seven').hover(
        function(){
            $('.rating-choice').prevAll().addBack().addClass('rating-7');
            $('.rating-choice').nextAll().removeClass('empty');
        },
        function(){
            $('.rating-choice').prevAll().addBack().removeClass('rating-7');
        }
    );

    $('.eight').hover(
        function(){
            $('.rating-choice').prevAll().addBack().addClass('rating-8');
            $('.rating-choice').nextAll().removeClass('empty');
        },
        function(){
            $('.rating-choice').prevAll().addBack().removeClass('rating-8');
        }
    );

    $('.nine').hover(
        function(){
            $('.rating-choice').prevAll().addBack().addClass('rating-9');
            $('.rating-choice').nextAll().removeClass('empty');
        },
        function(){
            $('.rating-choice').prevAll().addBack().removeClass('rating-9');
        }
    );

    $('.ten').hover(
        function(){
            $('.rating-choice').prevAll().addBack().addClass('rating-10');
            $('.rating-choice').nextAll().removeClass('empty');
        },
        function(){
            $('.rating-choice').prevAll().addBack().removeClass('rating-10');
        }
    );  
});

Answer 1

只需将 hover 事件附加到 li 上，如下所示:

$(document).ready(function(){
    $('li').hover(
        function(){
            var classSuffix = $(this).find('input').attr('id').split('-')[1];
            $('.rating-choice').prevAll().addBack().addClass('rating-' + classSuffix);
            $('.rating-choice').nextAll().removeClass('empty');
        },
        function(){
            var classSuffix = $(this).find('input').attr('id').split('-')[1];
            $('.rating-choice').prevAll().addBack().removeClass('rating-' + classSuffix);
        }
    );
});