jq实现评星功能功能

浏览: 419次 日期:2017年12月15日 19:17:56 作者:青格勒

评星功能,有些网站很需要评星功能,比如说商城,再比如评分,都是可以使用的,这次我使用了jq做了一个比较简单的评星功能,希望能帮得上需要的人。最下方有一个运行按钮,可以直接在线运行哦。JQ是使用了cdn,有可能会失效,如果失效了,请复制到本地测试也行。

 

其实这个也可以使用背景图来做的,只要利用好JQ生成的两个class就可以(v-on和on),v-on是hover的时候临时添加的,on是最终的选择,程序可以判断带on的有几个就可以得到评星的等级了。

 

<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<div class="js_star">
    <span>★</span>
    <span>★</span>
    <span>★</span>
    <span>★</span>
    <span>★</span>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $js_star = $('.js_star');
        $js_star_span = $('.js_star span');
        $js_star_span.hover(function(){
            $(this).prevAll().addClass('v-on');
            $(this).addClass('v-on');
            $(this).nextAll().removeClass('v-on');
        },function(){
            $js_star_span.removeClass('v-on');
        });
        $js_star_span.click(function(){
            $(this).prevAll().addClass('on');
            $(this).addClass('on');
            $(this).nextAll().removeClass('on');
        });
    });
</script>
<style type="text/css">
    *{ margin:0; padding:0; font-style: normal;}
    .js_star{ height:36px; line-height:36px; width:150px; text-align:center; margin:0 auto;}
    .js_star span{ display:block; float:left; width:30px; font-size:26px; color:#999; cursor:pointer;}
    .js_star span.on{ color:#FF6600;}
    .js_star:hover span.on{ color:#999;}
    .js_star:hover span.v-on{ color:#FF6600;}
</style>

文章链接:http://cenggel.com/js/21.html

版权声明:文章《jq实现评星功能功能》由青格勒编写,转载请带上文章链接。

本章内容纯属乱讲,如有雷同,纯属巧合。如有借鉴之处已表明出处。

点击任意位置关闭窗口,感谢您的支持。


打赏规则 - 为了避免对于打赏模式产生误解,说明一下几点内容:

  • 1.打赏纯粹自愿,金额不限,别太多,1块就行;
  • 2.打赏不能作为解答疑问的理由;
  • 3.打赏不能帮你做毕业设计或论文;
  • 4.打赏不能帮你做工作中的项目;
  • 5.打赏就是这不能那不能,只是单纯打赏而已。
  • 5.最后谢谢支持。
关闭
相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注