Question

获得了星级评分js

这个js只用两种颜色，红色和蓝色。当一个人在星星上移动鼠标时，原始评级会被隐藏，鼠标移动时会显示新的评级，即如果我们将鼠标移动到星星上，那么除非我们将鼠标移离星星，否则我们无法看到原始评级。我想要的是，当一个人移动他的鼠标时，原始评级应该以浅色显示，而我们正在做的那个应该是深色（不是红色，因为它是固定评级显示的颜色），一旦我们修复它然后，它会以相同的红色和蓝色颜色显示出来。我现在该怎么办？我厌倦了玩css和js，但它没有任何帮助，因为我不是很擅长:( 帮助将被高度评价!!

P.S。请不要建议一些大js，因为我不能去他们...我需要一个小的，因为它可以为这个评级的东西，这就是为什么我选择这个nofunc js .....

Answer 1

试试这个。这就是我为网站所做的事情

html代码

<div id="rating">
    <div id="star1">
        <img src="images/on.png" alt="1"/>
    </div>
    <div id="star2">
        <img src="images/on.png" alt="2"/>
    </div>
    <div id="star3">
        <img src="images/on.png" alt="3"/>
    </div>
    <div id="star4">
        <img src="images/on.png" alt="4"/>
    </div>
    <div id="star5">
        <img src="images/on.png" alt="5"/>
    </div>
</div>
<input type="hidden" name="ratingval" id="ratingval" value="0" />

js script

$(document).ready(function(){
    stars = ['off','off','off','off','off','off'];  
    clearRating();

    $('#star1 img').click(function(){ rateTheStar(1);});
    $('#star2 img').click(function(){ rateTheStar(2);});
    $('#star3 img').click(function(){ rateTheStar(3);});
    $('#star4 img').click(function(){ rateTheStar(4);});
    $('#star5 img').click(function(){ rateTheStar(5);});
});


// Bl holder functions 

function clearRating()  {
    count = 1;
    for(count = 1; count <= 5; count++) {
        strTarget = '#star'+count+' img';
        $(strTarget).animate({'opacity':0});
    }
}

function rateTheStar(targetno)  {
        if(stars[targetno] == 'off')    {

            target = '';
            i = 0;
            j = 0;

            for(j = 1; j <= targetno; j++)  {
                target = '#star'+j+' img';
                stars[j] = 'on';
                $(target).animate({'opacity':1},'slow');
            }
            document.getElementById('ratingval').value = targetno;
            for(i = targetno+1; i <= 5; i++)    {
                str = '#star'+i+' img';
                $(str).animate({'opacity':0},'slow');
            }
            //alert(stars[1]+" "+stars[2]+" "+stars[3]+" "+stars[4]+" "+stars[5]);
        }
        else if(stars[targetno] == 'on')    {
            document.getElementById('ratingval').value = targetno;
            i = 0;
            newTargetNo = targetno + 1;
            for(i = newTargetNo; i <= 5; i++)   {
                str = '#star'+i+' img';
                stars[i] = 'off';
                $(str).animate({'opacity':0},'slow');
            }
        }
    }

css文件

#rating {
    width:120px;
    height:34px;
    display:inline;
    overflow:hidden;
    display:block;
}

#rating img {
    background-image:url(../images/off.png);
}


#star1  {
    width:20px;
    height:32px;
    float:left;
    background-image:url(../images/off.png);
}

#star2  {
    width:20px;
    height:32px;
    float:left;
    background-image:url(../images/off.png);
}

#star3  {
    width:20px;
    height:32px;
    float:left;
    background-image:url(../images/off.png);
}

#star4  {
    width:20px;
    height:32px;
    float:left;
    background-image:url(../images/off.png);
}

#star5  {
    width:20px;
    height:32px;
    float:left;
    background-image:url(../images/off.png);
}

图片：http://thewoodhouse.net/jukebox/images/on.png和http://thewoodhouse.net/jukebox/images/off.png

您可以尝试此示例html文件http://thewoodhouse.net/jukebox/admin.html

中的代码

Answer 2

你好我认为这个教程会对你有所帮助这是一个很好的 http://net.tutsplus.com/tutorials/html-css-techniques/building-a-5-star-rating-system-with-jquery-ajax-and-php/

如何在这个js ???中改变鼠标悬停时星星的颜色？

2 个答案: