jQuery五星評價+印象評價+評語表單代碼

來源:http://www.xdpitk.live/js/4448.html 2019-06-19 11:58瀏覽(208) 收藏

jQuery商品交易訂單五星評價+印象評價+評語表單代碼,一款實用的售后星級評分留言反饋代碼。
jQuery五星評價+印象評價+評語表單代碼
分類:表單代碼 > 表單插件 難易:初級
查看演示 下載資源: 14 下載資源 下載積分: 30 積分

js代碼

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
    /*
     * 根據index獲取 str
     * **/
    function byIndexLeve(index){
        var str ="";
        switch (index)
        {
            case 0:
                str="差評";
                break;
            case 1:
                str="較差";
                break;
            case 2:
                str="中等";
                break;
            case 3:
                str="一般";
                break;
            case 4:
                str="好評";
                break;
        }
        return str;
    }
    //  星星數量
    var stars = [
        ['x2.png', 'x1.png', 'x1.png', 'x1.png', 'x1.png'],
        ['x2.png', 'x2.png', 'x1.png', 'x1.png', 'x1.png'],
        ['x2.png', 'x2.png', 'x2.png', 'x1.png', 'x1.png'],
        ['x2.png', 'x2.png', 'x2.png', 'x2.png', 'x1.png'],
        ['x2.png', 'x2.png', 'x2.png', 'x2.png', 'x2.png'],
    ];
    $(".block li").find("img").hover(function(e) {
        var obj = $(this);
        var index = obj.index();
        if(index < (parseInt($(".block li").attr("data-default-index")) -1)){
            return ;
        }
        var li = obj.closest("li");
        var star_area_index = li.index();
        for (var i = 0; i < 5; i++) {
            li.find("img").eq(i).attr("src", "img/" + stars[index][i]);//切換每個星星
        }
        $(".level").html(byIndexLeve(index));
    }, function() {
    })

    $(".block li").hover(function(e) {
    }, function() {
        var index = $(this).attr("data-default-index");//點擊后的索引
        index = parseInt(index);
        console.log("index",index);
        $(".level").html(byIndexLeve(index-1));
        console.log(byIndexLeve(index-1));
        $(".order-evaluation ul li:eq(0)").find("img").attr("src","img/x1.png");
        for (var i=0;i<index;i++){

            $(".order-evaluation ul li:eq(0)").find("img").eq(i).attr("src","img/x2.png");
        }
    })
    $(".block li").find("img").click(function() {
        var obj = $(this);
        var li = obj.closest("li");
        var star_area_index = li.index();
        var index1 = obj.index();
        li.attr("data-default-index", (parseInt(index1)+1));
        var index = $(".block li").attr("data-default-index");//點擊后的索引
        index = parseInt(index);
        console.log("index",index);
        $(".level").html(byIndexLeve(index-1));
        console.log(byIndexLeve(index-1));
        $(".order-evaluation ul li:eq(0)").find("img").attr("src","img/x1.png");
        for (var i=0;i<index;i++){
            $(".order-evaluation ul li:eq(0)").find("img").eq(i).attr("src","img/x2.png");
        }

    });
    //印象
    $(".order-evaluation-check").click(function(){
        if($(this).hasClass('checked')){
            //當前為選中狀態,需要取消
            $(this).removeClass('checked');
        }else{
            //當前未選中,需要增加選中
            $(this).addClass('checked');
        }
    });
    //評價字數限制
    function words_deal()
    {
        var curLength=$("#TextArea1").val().length;
        if(curLength>140)
        {
            var num=$("#TextArea1").val().substr(0,140);
            $("#TextArea1").val(num);
            alert("超過字數限制,多出的字將被截斷!" );
        }
        else
        {
            $("#textCount").text(140-$("#TextArea1").val().length);
        }
    }
    $("#order_evaluation").click(function(){
        $("#order_evaluate_modal").html("感謝您的評價!么么噠(*  ̄3)(ε ̄ *)").show().delay(3000).hide(500);
    })
</script>
評論0
頭像

系統已開啟自動識別垃圾評論機制,識別到的自動封號,下載出錯或者資源有問題請聯系全棧客服QQ 416148489

1 2
重庆百变王牌app