zoukankan      html  css  js  c++  java
  • 五星评价的一个模块

    项目中需要这个小功能,就写了出来。

    <script type="text/javascript">
    $(function () {
    //为所有的li标签绑定mouseout和mouseover事件。bind({事件名:function(){},事件名:function(){}})的方法绑定多个事件
    $("#div li").bind({
    mouseout:function () {
    $(this).css("color", "black").html("☆").prevAll().css("color", "black").html("☆")
    },
    mouseover: function () {
    $(this).css("color", "red").html("★").prevAll().css("color", "red").html("★")
    }
    });
    //=实时显示分数.【index】搜索匹配的元素,并返回相应元素的索引值,从0开始计数。
    $("#div li").mouseover(function () {
    $("#p").html(parseInt( $(this).index("#div li"))+1);
    });
    //鼠标按下时,确定分数。
    $("#div li").mousedown(function () {
    $("#score").html(("你选择的分数是" + (parseInt($(this).index("#div li")) + 1)));
    $(this).css("color", "red").html("★").prevAll().css("color", "red").html("★")
    //全部li标签的绑定事件全部清除--unbind方法可以加参数清除特定的事件。不加全部清除
    });
    })
    </script>

    <div id="div">
    <ul class="test_ul" >
    <li style="list-style-type:none;">☆</li> <li style="list-style-type:none;">☆</li> <li style="list-style-type:none;">☆</li><li style="list-style-type:none;">☆</li><li style="list-style-type:none;">☆</li>
    </ul>
    </div>
    <p id="p"></p>
    <p id="score"></p>

  • 相关阅读:
    4月1日作业总结,成绩
    4月8日作业重点及点评
    构建之法 东北师大站 冲刺领跑
    4月1日作业重点及点评
    3月25日作业总结,成绩
    3月18日作业总结,成绩
    3月25日作业重点及点评
    python: 反射机制;
    python: 基本知识(一)
    opencv: 轮廓提取;
  • 原文地址:https://www.cnblogs.com/caozengling/p/5478662.html
Copyright © 2011-2022 走看看