zoukankan      html  css  js  c++  java
  • 五星简单操作

    <input type="text" name="score" id="score" value="" />
    <div id="star" class="clearfix">
    <div class="star">
    <span> 请打分 <em class="red">*</em></span>
    <ul class="xingUL">
      <li class=""><a href="javascript:;">1</a></li>
      <li class=""><a href="javascript:;">2</a></li>
      <li class=""><a href="javascript:;">3</a></li>
      <li class=""><a href="javascript:;">4</a></li>
      <li class=""><a href="javascript:;">5</a></li>
    </ul>
    <i class="tishi"></i>
    </div>
    </div>

    <script type="text/javascript">
    $(function(){
    mark('star');
    });

    function mark(classobj){
    var aLi=[],oUl=[],oSpan=[],oP=[],sel=[],aMsg = [
    "很不满意",
    "不太满意",
    "一般",
    "比较满意",
    "非常满意"
    ];
    $('.'+classobj).each(function(e){
    aLi[e] = $(this).find('li');
    sel[e] = $(this).find('li[class=on]').length;
    oUl[e] = $(this).find('ul');
    oSpan[e] = $(this).find('i');
    //oP[e] = $(this).find('p');
    aLi[e].unbind('mouseover').mouseover(function(){
    aLi[e].attr('class','')
    for (var i = 0; i <= $(this).index(); i++) {
    aLi[e].eq(i).attr('class',"on");
    }
    //oP[e].show().html(aMsg[$(this).index()]);
    });
    aLi[e].unbind('mouseout').mouseout(function(){

    aLi[e].attr('class','')
    for (var i = 0; i < sel[e]; i++) {
    aLi[e].eq(i).attr('class',"on");
    }
    //oP[e].hide().html('');
    });
    aLi[e].unbind('click').click(function(){
    aLi[e].attr('class','')
    for (var i = 0; i <= $(this).index(); i++) {
    aLi[e].eq(i).attr('class',"on");
    }
    //oP[e].hide();
    sel[e] = $(this).index()+1;
    oSpan[e].html(aMsg[$(this).index()]);
    document.getElementById('score').value = sel[e];
    //console.log(sel[e]);
    });
    });
    }
    </script>

  • 相关阅读:
    模拟手机售电影票
    flex布局
    如何制作快速加载的HTML页面
    css布局列表,自适应
    iOS项目中常见定时器
    iOS中TableView的分割线顶格样式的实现
    iOS本地化项目上传到gitHub
    iOS初学者易懵逼的Timer延时
    iOS同种界面moda和push方式切换
    iOS之push和modal大不同
  • 原文地址:https://www.cnblogs.com/hejianrong/p/5703797.html
Copyright © 2011-2022 走看看