jQuery写评价的星星功能

Html

Css

.stars {
	white-space:nowrap;
	text-align:center;
	margin-top:20px;
	margin-bottom:20px;
}
.stars li {
	display:inline-block;
	color:#ADADAD;
	font-size:40px;
}

$(function() {
    //为星星设置hover效果
    var isClicked = false;
    var beforeClickedIndex = -1;
    var clickNum = 0; //点击同一颗星次数

$('li').hover(
        function() {
            if (!isClicked) {
                $(this).css('color', '#F0AD4E');
                var index = $(this).index();

for (var i = 0; i <= index; i++) {
                    $('li:nth-child(' + i + ')').css('color', '#F0AD4E');
                }
            }
        },
        function() {
            if (!isClicked) {
                $('li').css('color', '#ADADAD');
            }
        }
    );

//星星点击事件
    $('li').click(function() {
        $('li').css('color', '#ADADAD');
        isClicked = true;
        var index = $(this).index();

for (var i = 1; i <= index + 1; i++) {
            $('li:nth-child(' + i + ')').css('color', '#F0AD4E');
        }
        if (index == beforeClickedIndex) { //两次点击同一颗星星 该星星颜色变化
            clickNum++;
            if (clickNum % 2 == 1) {
                $('li:nth-child(' + (index + 1) + ')').css('color', '#ADADAD');
            } else {
                $('li:nth-child(' + (index + 1) + ')').css('color', '#F0AD4E');
            }

} else {
            clickNum = 0;
            beforeClickedIndex = index;
        }
    });
});

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

jQuery写评价的星星功能



代码描述：jQuery 写评价的星星打分投票功能

更新时间：2021-06-15 23:05:18

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

猫咬狗

相关代码

jQuery写评价的星星功能

最新