comments

功能描述

  1. jQuery带表情包评论插件

快速使用

  1. //从缓存中获取数据并渲染
  2.     let msgBoxList = JSON.parse(window.localStorage.getItem('msgBoxList')) || [];
  3.     innerHTMl(msgBoxList)
  5. //点击发表按扭，发表内容
  6.     $("span.submit").click(function () {
  7.         let txt = $(".message").html(); //获取输入框内容
  8.         if (!txt) {
  9.             $('.message').focus(); //自动获取焦点
  10.             return;
  11.         }
  12.         let obj = {
  13.             msg: txt
  14.         }
  15.         msgBoxList.unshift(obj) //添加到数组里
  16.         window.localStorage.setItem('msgBoxList', JSON.stringify(msgBoxList)) //将数据保存到缓存
  17.         innerHTMl([obj]) //渲染当前输入框内容
  18.         $('.message').html('') // 清空输入框
  20.     });
  22. //渲染html
  23.     function innerHTMl(List) {
  24.         List = List || []
  25.         List.forEach(item => {
  26.             let str =
  27.                 `<div class='msgBox'>
  28.                     <div class="headUrl">
  29.                         <img src='libs/images/tx.jpg' width='50' height='50'/>
  30.                         <div>
  31.                             <span class="title">木林森里没有木</span>
  32.                             <span class="time">2018-01-01</span>
  33.                         </div>
  34.                         <a class="del">删除</a>
  35.                     </div>
  36.                     <div class='msgTxt'>
  37.                         ${item.msg}
  38.                     </div>
  39.                 </div>`
  40.             $(".msgCon").prepend(str);
  41.         })
  42.     }

特别说明