使用js/jquery生成内容组合标签

  • 内容
  • 相关

我们可以将一篇文章内容定性成许许多多的标签,一方面方便我们做好seo,另一方面更能切切实实地方便用户查找到相关的信息。往往一篇文章里面可能会包含多个标签,博主常用的方式是将它们用英文逗号隔开,然后用FIND_IN_SET来快速地查找它们所属于的文章,效果还是不错的。

先看下实现效果:

1488353153289579.gif

主要的HTML代码:

 <div class="form-group">
<div class="label">
<label for="sitename">请设置标签(可多选)</label>
</div>
<div class="field">
<select class="input" id="tagsel" onchange="insertToTag(this)">
<option value="">请选择一个标签...</option>
<?php foreach($taglist as $v):?>
<option rev="<?=$v['pid']?>" value="<?=$v['enname']?>" zhvalue="<?=$v['_name']?>" 
<?=$v['id']==$info['cid']?'selected':''?>><?=$v['name']?></option>
<?php endforeach;?>
</select>
<input type="hidden" name="tag_en" id="tag_en" />
<dl class="articleTag l" id="articleTag"></dl> 
<!--作展示标签用dd-->
</div>  
 </div>
<div class="form-group">
<div class="label">
<label for="title">已有标签</label>
</div>
<div class="field">
<input type="text" readonly="true" class="input" id="tag_zh" name="tag_zh" size="50" placeholder="已有标签"/>                                
</div>
</div>

用到的js/jquery如下:

//选中下拉框执行方法,生成tag
function insertToTag(obj){
        var rev=obj.options[obj.selectedIndex].getAttribute('rev');
        var zhvalue=obj.options[obj.selectedIndex].getAttribute('zhvalue');
        var tag_en=document.getElementById('tag_en');
        var dh=',';
        if(rev !='0'){                
            var tag_split=tag_en.value.split(',');
            var stat=contains(tag_split, obj.value);//返回true 
            if(!stat){
                tag_en.value+=(obj.value+dh);
                tag_zh.value+=zhvalue+dh;
                document.getElementById('articleTag').innerHTML+=
                '<dd><a id="_dda" entitle="'+obj.value+'" zhtitle="'+zhvalue+'" entitle="'+tag_en.value+'">'+zhvalue+'</a><b onclick="delTag(this)">×</b></dd>';  
            }
        }
    }
    //删除tag
    function delTag(obj){
        var parentNode=obj.parentNode;
        var _zhtitle=parentNode.firstChild.getAttribute('zhtitle');       
        var _entitle=parentNode.firstChild.getAttribute('entitle');       
        //alert(_entitle);return;
        var entag_split=document.getElementById('tag_en').value.split(',');
        var zhtag_split=document.getElementById('tag_zh').value.split(',');
 
        removeByValue(entag_split, _entitle);
        removeByValue(zhtag_split, _zhtitle);
 
        document.getElementById('tag_en').value=entag_split.join(',');
        document.getElementById('tag_zh').value=zhtag_split.join(',');
         
        obj.parentNode.innerHTML='';//清空
    }
    /*以下为自定义方法,用来处理字符串与数组之间的关系*/
    //验证数组包含字符串
    function contains(arr, obj) {  
        var i = arr.length;  
        while (i--) {  
            if (arr[i] === obj) {  
                return true;  
            }  
        }  
        return false;  
    }
    //删除数组中的字符串
    function removeByValue(arr, val) {
      for(var i=0; i<arr.length; i++) {
        if(arr[i] == val) {
          arr.splice(i, 1);
          break;
        }
      }
    }

当然实现此种效果还有各式各样的途径,对js/jquery的灵活处理才是关键所在。

使用js/jquery生成内容组合标签
         本页正文内容约2550个文字
         本文标签:

         版权声明:若无特殊注明,本文皆为“懒人的小窝”原创,转载请保留文章出处。

         本文链接:https://suppore.cn/491.html   百度已收录

发表评论

电子邮件地址不会被公开, 推荐使用QQ快速评论!

评论

1条评论
  1. avatar

    企业管理培训 Lv.3 Firefox 51.0 Firefox 51.0 Windows 7 x64 Edition Windows 7 x64 Edition 回复

    厉害了

    广东省深圳市 电信

    00:00 / 00:00
    顺序播放