Asp,Php,Jssdk,mysql,mssql,微信公众号开发,小程序开发-学习笔记

js做的评价系统ajax保存ul class赋值

<script type="text/javascript" src="js/jquery-1.8.2.min.js" ></script>

<div class="content content_new">

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">

  <tr>

    <td height="40" bgcolor="#009bdb"><div align="center"><h1>评价信息</h1></div></td>

  </tr>

</table>

<table width="93%" border="0" align="center" cellpadding="0" cellspacing="0" style="margin-top:20px;">

  <tr>

    <td width="24%" height="40">水工电话<font color="#FF0000">*</font></td>

    <td width="76%"><div align="right">

      <input type="text" id="tel" style="width:99%" class="_input">

    </div></td>

  </tr>

  <tr>

    <td height="40">服务态度<font color="#FF0000">*</font></td>

    <td><div id="mydiv1" currentIndex="0" class="mydiv">

    <ul class="star_ul" id="fwtd">

       <li num="1"><img src="picture/star_empty.png" class="xing_hui"/></li>

       <li num="2"><img src="picture/star_empty.png"  class="xing_hui"/></li>

       <li num="3"><img src="picture/star_empty.png"  class="xing_hui"/></li>

       <li num="4"><img src="picture/star_empty.png"  class="xing_hui"/></li>

       <li num="5"><img src="picture/star_empty.png"  class="xing_hui"/></li>

  </ul>

</div></td>

  </tr>

  <tr>

    <td height="40">服务质量<font color="#FF0000">*</font></td>

    <td><div id="mydiv2" currentIndex="0" class="mydiv">

    <ul class="star_ul" id="fwzl">

       <li num="1"><img src="picture/star_empty.png" class="xing_hui"/></li>

       <li num="2"><img src="picture/star_empty.png"  class="xing_hui"/></li>

       <li num="3"><img src="picture/star_empty.png"  class="xing_hui"/></li>

       <li num="4"><img src="picture/star_empty.png"  class="xing_hui"/></li>

       <li num="5"><img src="picture/star_empty.png"  class="xing_hui"/></li>

  </ul>

</div></td>

  </tr>

  <tr>

    <td>备　　注</td>

    <td><textarea name="bz" rows="3" class="_textarea" id="bz" style="width:98%"></textarea></td>

  </tr>

    <tr>

    <td colspan="2"><div align="center">

    <a class="weui-btn weui-btn_primary" href="javascript:" id="ok"><font color="#FFFFFF">提交评价</font></a>

    </div></td>

    </tr>

</table>

</div>

<script>

$("#fwtd li").click(function(){

var fwtd = $("#fwtd").val($(this).attr("num"));

})

$("#fwzl li").click(function(){

var fwzl = $("#fwzl").val($(this).attr("num"));

})

</script>

<script type="text/javascript">

//匿名评价

        var isclick = false;

        function change(mydivid,num) {

            if (!isclick) {

                var tds = $("#"+mydivid+" ul li");

                for (var i = 0; i < num; i++) {

                    var td = tds[i];

                    $(td).find("img").attr("src","picture\/star_full.png");

                }

                var tindex = $("#"+mydivid).attr("currentIndex");

                tindex = tindex==0?0:tindex+1;

                for (var j = num; j < tindex; j++) {

                    var td = tds[j];

                    $(td).find("img").attr("src","picture\/star_empty.png");

                }

                $("#"+mydivid).attr("currentIndex",num);

            }

        }

        function repeal(mydivid,num) {

            if (!isclick) {

                var tds = $("#"+mydivid+" ul li");

                var tindex = $("#"+mydivid).attr("currentIndex");

                tindex = tindex==0?0:tindex+1;

                for (var i = tindex; i < num; i++) {

                    var td = tds[i];

                    $(td).find("img").attr("src","picture\/star_empty.png");

                }

                $("#"+mydivid).attr("currentIndex",num);

            }

        }

        function change1(mydivid,num) {

            if (!isclick) {

                change(mydivid,num);

            }

            else {

                alert("Sorry,You had clicked me!");

            }

        }

        $(function(){

            initEvent('mydiv1');

            initEvent('mydiv2');

        });

        function initEvent(mydivid) {

            var tds = $("#"+mydivid+" ul li");

            for (var i = 0; i < tds.length; i++) {

                var td = tds[i];

                $(td).live('mouseover',function(){var num = $(this).attr("num");change(mydivid,num);});

                $(td).live('click',function(){var num = $(this).attr("num");change1(mydivid,num);});

            }

        }

</script>

<script>

   $(function(){

//点击 ID为ok的按钮或者链接或者span

$("#ok").click(function(){

ajaxpost();

});

   })

function ajaxpost(){

//下面列出来几种Jquery获取值的方式，有id的，有class的，有input的，可以自行参考jquery的文档的选择器

var tel        =$("#tel").val();

var fwtd =$("#fwtd").val();

var fwzl =$("#fwzl").val();

var bz        =$("#bz").val();

//ajax提交,用get的提交方式

$.ajax({

type:"get",

cache:false,

url:"ajaxsave.asp?tel="+tel+"&bz="+bz+"&fwzl="+fwzl+"&fwtd="+fwtd,

success:function(_){

//提交成功

$("#result").html("");//清空result的内容

alert (_);

}

})

}

</script>

案例：http://dp.0539jwz.com/pj.asp