• jquery 星星等级


    引用:http://www.cnblogs.com/i0air/archive/2012/06/12/2546652.html

    表单名称:Importance,类型为字符串,默认值 '☆☆☆☆☆'

    使用方法:

    引用此脚本,为容器设置id='selStar',容器最好是span,放在页面需要的位置。

    JavaScript脚本:

    复制代码
    /// <reference path="jquery-1.4.1.js" />
    /// <reference path="jquery-1.4.1-vsdoc.js" />
    
    $().ready(function () {
        $("#selStar").css("cursor", "pointer");
        $("#selStar").html('<span id="star0">☆</span><span id="star1">☆</span><span id="star2">☆</span><span id="star3">☆</span><span id="star4">☆</span>'
            + '<input type="hidden" name="Importance" id="importance" value="☆☆☆☆☆" />');
    
        var s0 = 0; var s1 = 0; var s2 = 0; var s3 = 0; var s4 = 0;
    
        $("#star0").mouseover(function () { s0 = 1; fnStar(); });
        $("#star1").mouseover(function () { s1 = 1; fnStar(); });
        $("#star2").mouseover(function () { s2 = 1; fnStar(); });
        $("#star3").mouseover(function () { s3 = 1; fnStar(); });
        $("#star4").mouseover(function () { s4 = 1; fnStar(); });
    
        $("#star0").mouseout(function () { s0 = 0; fnStar(); });
        $("#star1").mouseout(function () { s1 = 0; fnStar(); });
        $("#star2").mouseout(function () { s2 = 0; fnStar(); });
        $("#star3").mouseout(function () { s3 = 0; fnStar(); });
        $("#star4").mouseout(function () { s4 = 0; fnStar(); });
    
        $("#star0").click(fnClick);
        $("#star1").click(fnClick);
        $("#star2").click(fnClick);
        $("#star3").click(fnClick);
        $("#star4").click(fnClick);
    
        function fnStar() {
            if (s0 + s1 + s2 + s3 + s4 == 0) {
                var s = $("#importance").val().split('');
                $("#star0").text(s[0]); $("#star1").text(s[1]); $("#star2").text(s[2]); $("#star3").text(s[3]); $("#star4").text(s[4]);
            } else {
                $("#star0").text("☆");
                $("#star1").text("☆");
                $("#star2").text("☆");
                $("#star3").text("☆");
                $("#star4").text("☆");
                if (s0 + s1 + s2 + s3 + s4 > 0) { $("#star0").text("★"); }
                if (s1 + s2 + s3 + s4 > 0) { $("#star1").text("★"); }
                if (s2 + s3 + s4 > 0) { $("#star2").text("★"); }
                if (s3 + s4 > 0) { $("#star3").text("★"); }
                if (s4 > 0) { $("#star4").text("★"); }
            }
        }
    
        function fnClick() {
            $("#importance").val($("#star0").text() + $("#star1").text() + $("#star2").text() + $("#star3").text() + $("#star4").text());
        }
    });
  • 相关阅读:
    IO
    多线程
    常用类
    异常
    接口
    面向对象
    面向对象
    学习数组
    for的嵌套循环
    XML:是什么?怎样工作的?可以做什么?将来的发展有会怎样?
  • 原文地址:https://www.cnblogs.com/sode/p/2794969.html
Copyright © 2020-2023  润新知