别问为啥有这么逗比的功能Σ( ° △ °|||)︴ 先看看需求图 功能决定代码思路。这次的功能跟我上次写的博客有部分相同，不过踩坑更多，我觉得有必要记录一下。上篇的地址，有兴趣的可以去看看思路 因为有点赞功能，我把点赞数和标签组合保存，数据库还是只有一个字段（也可以循环后逐条保存） 上代码： 页面
<div class="my_tag"> <h2 class="tag_title"><p>我的标签</p><span>（最多添加10个标签）</span></h2> <div class="my_list"> <ul id="thisway"> <!--<li><span>90后</span><img src="{DT_MOB}static/header/images/close_icon.png" class="close_icon" /><span></span></li>--> <!--<li><span>营销</span><img src="{DT_MOB}static/header/images/close_icon.png" class="close_icon" /></li>--> <!--<li><span>广告</span><img src="{DT_MOB}static/header/images/close_icon.png" class="close_icon" /></li>--> <!--<li><span>团队精神</span><img src="{DT_MOB}static/header/images/close_icon.png" class="close_icon" /></li>--> <!--<li><span>执行力</span><img src="{DT_MOB}static/header/images/close_icon.png" class="close_icon" /></li>--> <!--<li><span>抗压能力</span><img src="{DT_MOB}static/header/images/close_icon.png" class="close_icon" /></li>--> </ul> <p class="zdy_tag" style="clear: both;" mdui-dialog="{target: '#zdy_tag'}"><span>自定义标签</span></p> </div> </div> <form method="post" action="/mobile/member/mycompany.php?action=labelsave" id="dform" > <textarea id="saveLabel" name="saveLabel" style="display: none;"></textarea> </form> <div class="refer_list"> <a href="javascript:;" ><img src="{DT_MOB}static/header/images/ck_icon.png" class="ck_icon" /> <span class="labelname">90后</span> <span class="labelvalue" style="display: none">0</span> </a> <a><img src="{DT_MOB}static/header/images/ck_icon.png" class="ck_icon" /> <span class="labelname">80后</span> <span class="labelvalue" style="display: none">0</span> </a> </div>js部分，直接贴了
<script> $(function(){ $('.refer_list>a').on('click',function(index){ addtop(this); }); }); //给每个a标签添加一个事件 </script> <script> $(".tw2").click(function(){ $("#dform").submit(); }); var oldtext=[]; $(function(){ $('#thisway').html(''); $('#saveLabel').val('{$mylabel}'); Label(); }); function addtop(obj){ // var oldtext=JSON.parse($('#saveLabel').val()) ; //判断隐藏域的值是否为空，不为空的话要把值解析。 var text1=$('#saveLabel').val(); if(text1 !='' &&text1!='[]'){ //**这里有个坑，就是先数据再把数据清空时会有一个[]没有删除，查了很久才发现的问题。** oldtext = JSON.parse($('#saveLabel').val()); } var text=$(obj).find('.labelname').text(); var labelval=$(obj).find('.labelvalue').html();//这是点赞数 var labelarr = {"name":text,"value":labelval};//将点赞数和标签组成一个对象 if(oldtext.length >9){ alert("最多添加10个标签"); return false; } oldtext.push(labelarr); $('#saveLabel').val(JSON.stringify(oldtext)); //赋的值必须是字符串形式 Label(); } function Label(){ var xunhuan=JSON.parse($('#saveLabel').val()) ; $('#thisway').html(''); for(var i = 0; i < xunhuan.length; i++){ $('#thisway').append('<li><span>'+xunhuan[i].name+'</span><img onclick="labeldel('+i+');" src="{DT_MOB}static/header/images/close_icon.png" class="close_icon" /></li>'); } } // 删除 // 对list做循环遍历，加入判断条件，删除指定项目 function labeldel(i){ var xunhuan=JSON.parse($('#saveLabel').val()) ; for(var j = 0; j < xunhuan.length; j++){ if(j==i){ xunhuan.splice(j,1); break; } } $('#saveLabel').val(JSON.stringify(xunhuan)); Label(); } function addtop2(){ var a=$("#zilabel").val(); if(a.length>7){ alert("最多不能超过7个字"); return false; } var text1=$('#saveLabel').val(); if(text1 !=''){ oldtext = JSON.parse($('#saveLabel').val()); } if(oldtext.length >9){ alert("最多添加10个标签"); return false; } var labelarr = {"name":a,"value": 0}; oldtext.push(labelarr); $('#saveLabel').val(JSON.stringify(oldtext)); //赋的值必须是字符串形式 Label(); } </script>好了，下面是重点了，这个点赞没要求记录点赞人的信息，所以做了个缓存 页面代码
<div class="taglist"> <ul id="thisway"> {loop $mylabel $v} <li> <span class="labelname">{$v[name]}</span> <img src="{DT_STATIC}{$MODULE[4][moduledir]}/skin/homepage4/images/zan_icon1.png"> <span class="labelvalue">{$v[value]}</span> </li> {/loop} </ul> </div> <textarea id="saveLabel" name="saveLabel" style="display: none;" >{$data['mylabel']}</textarea>js部分
<script> $('#thisway').on('click','li',function(index){ labelzan(this); }); var oldtext=[]; var arraysave=[]; function labelzan(obj){ //判断隐藏域的值是否为空，不为空的话要把值解析。 var text1=$('#saveLabel').val(); if(text1 !=''){ oldtext = JSON.parse($('#saveLabel').val()); } var text=$(obj).find('.labelname').text(); //查询缓存中有没有赞过，没有就新增一个缓存 var username= {$username}; var strKey = "username"; var array1 = window.localStorage.getItem(strKey);//读取数据 if (array1) { //这个地方踩了个坑，js判断是否为空 arraysave =JSON.parse(array1) ; for(var j =0; j<arraysave.length; j++){ if(arraysave[j].name ==text ){ alert("已经点过赞了"); return false; } } } var labelarr = {"whosV":username,"name":text}; arraysave.push(labelarr); window.localStorage.removeItem(strKey);//删除缓存 window.localStorage.setItem(strKey,JSON.stringify(arraysave));//重新生成缓存（哈哈，简单把，js本地缓存就3句话ok） //循环遍历js，name相同的，value就加1 $('#thisway').html(''); for(var i = 0; i < oldtext.length; i++){ if(text == oldtext[i].name){ oldtext[i].value =parseInt(oldtext[i].value) +1; } $('#thisway').append(' <li> <span class="labelname">'+oldtext[i].name+'</span> <img src="{DT_STATIC}{$MODULE[4][moduledir]}/skin/homepage4/images/zan_icon1.png"> <span class="labelvalue">'+oldtext[i].value+'</span> </li>'); } var newtext=JSON.stringify(oldtext); $('#saveLabel').val(newtext); //赋的值必须是字符串形式 //把oldtext传值修改 $.ajax({ type:'post', url:'/mobile/member/extension.php?follow=4', data:{ 'newtext':newtext, 'username':username, }, success:function(data){ console.log(data); } }) } </script>