设置商品的分数,如4分,用4颗红心和一颗灰心表示,就需要js动态操作。
首先要获取商品分数
var $goods_scores_num = $("#goods_scores_num").val();//获取商品分数
此时获得分数是string,需要将其转换成int
$goods_scores_num = parseInt($goods_scores_num, 10);//将变量转换成10进制数字
接下来要获得添加红心和灰心的元素对象
var $goods_scores_img = $("#goods_scores_img");//获取是商品分数图像对象
然后就可向元素中添加红心和灰心了
if ( $.isNumeric($goods_scores_num) ) { //如果变量是数字,则进行下一步动作 for (var i=0; i<$goods_scores_num; i++) { $goods_scores_img.append("<img src='/static/public/light-heart.png' />"); } //商品分数为5,商品得分为红色心,其余为灰色 for (var j=5; j!=$goods_scores_num; j--) { $goods_scores_img.append("<img src='/static/public/gray-heart.png' />"); } }
完整代码
$(function(){ //start 商品分数 var $goods_scores_num = $("#goods_scores_num").val();//获取商品分数 $goods_scores_num = parseInt($goods_scores_num, 10);//将变量转换成10进制数字 var $goods_scores_img = $("#goods_scores_img");//获取是商品分数图像对象 if ( $.isNumeric($goods_scores_num) ) { //如果变量是数字,则进行下一步动作 for (var i=0; i<$goods_scores_num; i++) { $goods_scores_img.append(/"<img src='/static/public/light-heart.png' />/"); } //商品分数为5,商品得分为红色心,其余为灰色 for (var j=5; j!=$goods_scores_num; j--) { $goods_scores_img.append(/"<img src='/static/public/gray-heart.png' />/"); } } //end 商品分数 });
广告