js实现星星评价即获取返回值

效果   鼠标悬停,自己就加星

https://download.csdn.net/download/kxj19980524/11005717下载地址js,css文件

我上传的那个只有一行星星效果,用多行的话,只需要复制html的内容就可以了,然后把id一改在js里这样修改了id调方法就可以了

只要把这块id一变就可以了

往自己项目使用的时候记得把js,css等东西引用过来

<div>

            <div id="scoremark1" class="scoremark scores">
                <em class="score" id="jishu">4.0</em>
                <span class="star">
       <span class="ystar" style="width:80%"></span>
       <ul>
        <li><a href="javascript:void(0)" data-name="很差" class="one-star">1</a></li>
        <li><a href="javascript:void(0)" data-name="较差" class="two-stars">2</a></li>
        <li><a href="javascript:void(0)" data-name="一般" class="three-stars">3</a></li>
        <li><a href="javascript:void(0)" data-name="较好" class="four-stars">4</a></li>
        <li><a href="javascript:void(0)" data-name="很好" class="five-stars">5</a></li>
       </ul>
      </span>
                <div style="left: 30px; display: none;" class="tips"></div>
            </div>

</div>

 <div>
            <div  id="scoremark2" class="scoremark scores">
                <em class="score" id="fuwu">4.0</em>
                <span class="star">
       <span class="ystar" style="width:80%"></span>
       <ul>
        <li><a href="javascript:void(0)" data-name="很差" class="one-star">1</a></li>
        <li><a href="javascript:void(0)" data-name="较差" class="two-stars">2</a></li>
        <li><a href="javascript:void(0)" data-name="一般" class="three-stars">3</a></li>
        <li><a href="javascript:void(0)" data-name="较好" class="four-stars">4</a></li>
        <li><a href="javascript:void(0)" data-name="很好" class="five-stars">5</a></li>
       </ul>
      </span>
                <div style="left: 30px; display: none;" class="tips"></div>
            </div>
 </div>

            <div>
            <div  id="scoremark3" class="scoremark scores">
                <em class="score" id="jiaohu">4.0</em>
                <span class="star">
       <span class="ystar" style="width:80%"></span>
       <ul>
        <li><a href="javascript:void(0)" data-name="很差" class="one-star">1</a></li>
        <li><a href="javascript:void(0)" data-name="较差" class="two-stars">2</a></li>
        <li><a href="javascript:void(0)" data-name="一般" class="three-stars">3</a></li>
        <li><a href="javascript:void(0)" data-name="较好" class="four-stars">4</a></li>
        <li><a href="javascript:void(0)" data-name="很好" class="five-stars">5</a></li>
       </ul>
      </span>
                <div style="left: 30px; display: none;" class="tips"></div>
            </div>

            </div>


            <div>
                <div  id="scoremark4" class="scoremark scores">
                    <em class="score" id="meiguan">4.0</em>
                    <span class="star">
       <span class="ystar" style="width:80%"></span>
       <ul>
        <li><a href="javascript:void(0)" data-name="很差" class="one-star">1</a></li>
        <li><a href="javascript:void(0)" data-name="较差" class="two-stars">2</a></li>
        <li><a href="javascript:void(0)" data-name="一般" class="three-stars">3</a></li>
        <li><a href="javascript:void(0)" data-name="较好" class="four-stars">4</a></li>
        <li><a href="javascript:void(0)" data-name="很好" class="five-stars">5</a></li>
       </ul>
      </span>
                    <div style="left: 30px; display: none;" class="tips"></div>
                </div>
            </div>
            </div>
            <script>
                //星星评分
                starScore($("#scoremark1"));
                starScore($("#scoremark2"));
                starScore($("#scoremark3"));
                starScore($("#scoremark4"));
                function starScore(star){
                    star.find(".star ul li a").mouseenter(function(){
                        var txt = $(this).attr("data-name");
                        var x = $(this).parent("li").index();
                        star.find(".tips").html(txt).css("left",26+x*24).show();
                        $(this).parents(".scoremark").find(".score").html((x+1)+".0");
                    });
                    star.find(".star ul li a").mouseleave(function(){
                        var x = $(this).parent("li").index();
                        $(this).parents(".star").find(".ystar").width((x+1)*24);
                        $(this).parents(".star").next(".tips").html("").css("left",0).hide();
                    });
                }
            </script>

        </div>

获取每行的星星的点数只需要在标签上加id属性,然后.html获取就可以了,就是下面这个标签,它其实是动态变化的根据前台的操作,直接$("#jiaohu").html();直接就可以获取了