Question

需要一些我正在处理的星级评分系统的帮助。问题是我在一个页面上有多个星级，但如果我点击另一个领域的星星，它也会突出显示所有以前未点亮的星星。不知道如何修复它，请帮忙。以下是我的代码。

        function highlightStar(obj) {
            removeHighlight();      
            $('li').each(function(index) {
                $(this).addClass('highlight');
                if(index == $("li").index(obj)) {
                    return false;   
                }
            });
        }
        function removeHighlight() {
            $('li').removeClass('selected');
            $('li').removeClass('highlight');
        }
        function addRating(obj) {
            $('li').each(function(index) {
                $(this).addClass('selected');
                $('#rating').val((index+1));
                if(index == $("li").index(obj)) {
                    return false;   
                }
            });
        }
        function resetRating() {
            if($("#rating").val()) {
                $('li').each(function(index) {
                    $(this).addClass('selected');
                    if((index+1) == $("#rating").val()) {
                        return false;   
                    }
                });
            }
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="db-table1" cellpadding="0" cellspacing="0" align="left" border="1">    
             <tr>
                <td>Field 1</td>
            <td>
            <input type="text" name="rating" id="rating" />
            <ul onMouseOut="resetRating();">
              <li onmouseover="highlightStar(this);" onmouseout="removeHighlight();" onClick="addRating(this);">?</li>
              <li onmouseover="highlightStar(this);" onmouseout="removeHighlight();" onClick="addRating(this);">?</li>
              <li onmouseover="highlightStar(this);" onmouseout="removeHighlight();" onClick="addRating(this);">?</li>
              <li onmouseover="highlightStar(this);" onmouseout="removeHighlight();" onClick="addRating(this);">?</li>
              <li onmouseover="highlightStar(this);" onmouseout="removeHighlight();" onClick="addRating(this);">?</li>
            </ul>
            </td>
            </tr>
            <tr>
                <td>Field 2</td>
            <td>  
            <input type="text" name="rating2" id="rating2" />        
            <ul onMouseOut="resetRating();">
                <li onmouseover="highlightStar(this);" onmouseout="removeHighlight();" onClick="addRating(this);">?</li>
                <li onmouseover="highlightStar(this);" onmouseout="removeHighlight();" onClick="addRating(this);">?</li>
                <li onmouseover="highlightStar(this);" onmouseout="removeHighlight();" onClick="addRating(this);">?</li>
                <li onmouseover="highlightStar(this);" onmouseout="removeHighlight();" onClick="addRating(this);">?</li>
                <li onmouseover="highlightStar(this);" onmouseout="removeHighlight();" onClick="addRating(this);">?</li>
            </ul>
            </td>
            </tr>
            <tr>
                <td>Field 3</td>
            <td>   
            <input type="text" name="rating3" id="rating3" />    
            <ul onMouseOut="resetRating();">
                <li onmouseover="highlightStar(this);" onmouseout="removeHighlight();" onClick="addRating(this);">?</li>
                <li onmouseover="highlightStar(this);" onmouseout="removeHighlight();" onClick="addRating(this);">?</li>
                <li onmouseover="highlightStar(this);" onmouseout="removeHighlight();" onClick="addRating(this);">?</li>
                <li onmouseover="highlightStar(this);" onmouseout="removeHighlight();" onClick="addRating(this);">?</li>
                <li onmouseover="highlightStar(this);" onmouseout="removeHighlight();" onClick="addRating(this);">?</li>
            </ul>
            </td>
            </tr>     
            <tr>
                <td>Field 4</td>
            <td>    
            <input type="text" name="rating4" id="rating4" />    
            <ul onMouseOut="resetRating();">
                <li onmouseover="highlightStar(this);" onmouseout="removeHighlight();" onClick="addRating(this);">?</li>
                <li onmouseover="highlightStar(this);" onmouseout="removeHighlight();" onClick="addRating(this);">?</li>
                <li onmouseover="highlightStar(this);" onmouseout="removeHighlight();" onClick="addRating(this);">?</li>
                <li onmouseover="highlightStar(this);" onmouseout="removeHighlight();" onClick="addRating(this);">?</li>
                <li onmouseover="highlightStar(this);" onmouseout="removeHighlight();" onClick="addRating(this);">?</li>
            </ul>
            </td>
            </tr>   </table>

Answer 1

而不是所有这些内联函数，只需创建一些监听器：

$('li').on('mouseenter', function() {
    $(this).addClass('highlight'); // Add it to the clicked on LI
    $(this).prevAll('li').addClass('highlight'); // Add to all previous LI siblings too
});

$('li').on('mouseleave', function() {
    $('li').removeClass('highlight');
});

$('li').on('click', function() {
    $(this).addClass('selected');
    $(this).prevAll('li').addClass('selected');
});

然后您需要的所有HTML都是：

<ul>
    <li>?</li>
    <li>?</li>
    <li>?</li>
    <li>?</li>
    <li>?</li>
</ul>

甚至比上面更好的JS代码：

$('li').hover(function() { // Mouse In
    $(this).addClass('highlight'); // Add it to the clicked on LI
    $(this).prevAll('li').addClass('highlight'); // Add to all previous LI siblings too
},function() { // Mouse Out
    $('li').removeClass('highlight');
});

或者，正如美眉非常正确地指出的那样，使用event delegation：

$('table.db-table1').on('mouseenter', 'li', function( event ) {        
    $(this).addClass('highlight'); // Add it to the clicked on LI
    $(this).prevAll('li').addClass('highlight'); // Add to all previous LI 
}).on('mouseleave', 'li', function( event ) {
    $('li').removeClass('highlight');
});

这将添加两个侦听器，而不是更多。

Jquery Star评级问题

1 个答案: