js做的评价系统ajax保存ul class赋值,星星
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