星星打分效果整理

项目预览演示地址:http://www.imf7.com/code/star/

星星打分效果:[不支持半颗星星]
支持初始值显示;
支持一个页面多次引用;
每个投票模块可以任意安排投票项目,不限个数;
支持form向后台提交数据。
使用方法:
首先在页面中引入JS部分;
然后编写相应的HTML代码[下面代码结构中有讲HTML的要求];
然后引用效果:starGrade(“grade”, “gradeInput”);
上面这个引用中包含两个变量,第一个变量”grade”代表包含星星显示的节点ID,第二个变量”gradeInput”代表包含隐藏表单的节点ID.

HTML代码结构:
HTML方面必须包含两个节点:星星显示节点、隐藏表单节点,这两个项目数量是相互对应的,顺序也不能错。
例如:

<div id="gradeInput" style="display:block;">
  <input type="hidden" name="jiage" value="1" />
  <input type="hidden" name="fuwu" value="2" />
  <input type="hidden" name="zhuanye" value="3" />
  <input type="hidden" name="xingjiabi" value="4" />
</div>

<div class="grade" id="grade">
  <dl><dt>价格:</dt><dd><span>星</span><span>星</span><span>星</span><span>星</span><span>星</span></dd></dl>
  <dl><dt>服务:</dt><dd><span>星</span><span>星</span><span>星</span><span>星</span><span>星</span></dd></dl>
  <dl><dt>专业:</dt><dd><span>星</span><span>星</span><span>星</span><span>星</span><span>星</span></dd></dl>
  <dl><dt>性价比:</dt><dd><span>星</span><span>星</span><span>星</span><span>星</span><span>星</span></dd></dl>
</div>

以上代码包含2个ID,这两个结构时必须的,CSS样子自己定义,将模块放在那里都可以,但隐藏表单和提交表单必须在同一个FORM中。

其中隐藏input的name值根据程序需求随意命名

JS代码:

/*
Editor:f7
Date:2010.08
*/
// 星星打分效果开始
function starGrade(starElem, inputElem){
  var starElem = document.getElementById(starElem);
  var inputElem = document.getElementById(inputElem);
  var starItem = starElem.getElementsByTagName("dd");
  var input = inputElem.getElementsByTagName("input");
 
  //alert(input[0].value)
  // 注册星星滑过点击事件
  for(var i=0; i<starItem.length; i++){
    (function(i){
      var star = starItem[i].getElementsByTagName("span");
      for(var j=0; j<star.length; j++){
        (function(j){
          star[j].onmouseover = function(){ show(star, j) };
          star[j].onmouseout = function(){ hide(star, i) };
          star[j].onclick = function(){ lock(i, j) };
        })(j);
      }
    })(i);
   
    // 设置星星的初始值
    hide(starItem[i].getElementsByTagName("span"), i);
  }
  // 滑过操作
  function show(o, k){
  // o 单个项目的星星节点数组
  // k 是第几个星星
    for(var i=0; i<o.length; i++){
      o[i].className = "";
      if(i<=k)o[i].className = "show";
    }
  };
  // 离开操作
  function hide(o, x){
  // o 单个项目的星星节点数组
  // x 第几组投票
    for(var i=0; i<o.length; i++){
      o[i].className = "";
      if(i<input[x].value)o[i].className = "show";
    };
  }
  // 点击操作
  function lock(x, k){
  // x 第机组投票
  // k 是第几个星星
    input[x].value = k+1;
  }
}

项目预览演示地址:http://www.imf7.com/code/star/

Comments are closed.