Layui单个页面多个评分插件的使用方法

我的解决思路是:循环显示评分

 

代码如下:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>laofan-Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="layui.css"  media="all">
  <!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->
</head>
<body>
            
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>多个评分显示</legend>
</fieldset>
 
<div class="lf_rate" lay-data="{value:2 ,half: true, readonly:true,theme: '#1E9FFF'}"></div></br>

<div class="lf_rate" lay-data="{value:4 ,half: true, readonly:true,theme: '#009688'}"></div></br>

<div class="lf_rate" lay-data="{value:3.4 ,half: true, readonly:true}"></div></br>

          
<script src="layui.js" charset="utf-8"></script>
<!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 -->
<script>
layui.use(['rate','jquery'], function(){
  var rate = layui.rate;
  var $ = layui.jquery;
   
    //多个评分     
    layui.each( $('.lf_rate'), function (index, elem) {

        var configTemp = $(elem).attr('lay-data');
        try{
            configTemp = eval('(' + configTemp + ')');  

        }catch(e){
            configTemp  = {};

        }

        rate.render($.extend(true,{
            elem:elem
        }, configTemp));

    });
 
});
</script>

</body>
</html>

 

最终效果:

Layui单个页面多个评分

 

    A+
发布日期:2020年01月03日 19:38:16  所属分类:Layui
最后更新时间:2020-01-03 19:38:16
评分: (1 票;平均数5.00 ;最高评分 5 ;用户总数1;总得分 5;百分比100.00)
头像
PHP运行环境 wamp lamp lnmp 安装 配置 搭建
PHP运行环境 wamp lamp lnmp 安装 配置 搭建
  • ¥ 9.9元
  • 市场价:49.9元
wp discux 帝国 dedecms phpcms等快速建站
wp discux 帝国 dedecms phpcms等快速建站
  • ¥ 99.9元
  • 市场价:499.9元
刷流量 刷人气 刷点击 刷收藏 刷APP关键词
刷流量 刷人气 刷点击 刷收藏 刷APP关键词
  • ¥ 1.0元
  • 市场价:9.9元
免费SSL证书 HTTPS申请 安装 配置 支持通配符*
免费SSL证书 HTTPS申请 安装 配置 支持通配符*
  • ¥ 199.9元
  • 市场价:20000元

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: