• tag标签添加删除并把值存入到一个input的value内


    html:

    <input type="text" id="tagValue" style="display: none;" />
                            <div class="gametag_checked"></div>
                            <div class="gametag_box">
                                <em name ="em1">RGB</em>
                                <em name ="em2">网游</em>
                                <em name ="em3">RGB1</em>
                                <em name ="em4">网游1</em>
                                <em name ="em5">RGB2</em>
                                <em name ="em6">网游2</em>
                            </div>

    css:

    .gametag_checked{
        height: 25px;
    }
    .gametag_checked em{
        display:inline-block;
         50px;
        height: 25px;
        margin-right: 14px;
        text-align: center;
        line-height: 25px;
        background: #8d8d8d;
        color: #ffffff;
        cursor: pointer;
    }
    .gametag_box{
         359px;
        height: 114px;
        border: 1px #d8d8d8 solid;
        margin: 15px 0 0 150px;
    }
    .gametag_box em{
        display:inline-block;
         50px;
        height: 25px;
        margin:14px 0 0 14px;
        text-align: center;
        line-height: 25px;
        border: 1px #d8d8d8 solid;
        color: #4a4237;
        background: #ffffff;
        cursor: pointer;
    }

    js:

    $('.gametag_box em').each(function(index,element){
                    $(element).click(function(){
                       addTag(element)
                    });
                });
    
    function deleteTag(_this){
                   var obj = $(_this);
                   var deletValue = obj.text();
                   var deletName = obj.attr("name");
                   obj.hide();
                    var targetObj = $(".gametag_box em[name='"+deletName+"']");
                   targetObj.bind("click",function(){
                       addTag(targetObj);
                   });
                   var objval = $("#tagValue").val();
                   var valusArray = objval.split(",");
                   for(var i=0;i<valusArray.length;i++){
                       var value =     valusArray[i];
                       if(value==deletValue) {
                           valusArray.splice(i,1);
                       }
                   }
                 var newValue =  valusArray.join(",");
                 $("#tagValue").val(newValue);
    
            }
    
            function addTag(_this){
                        var thisValue = $(_this).text();
                        var thisName =     $(_this).attr("name");
                        $('.gametag_checked').append("<em onclick='deleteTag(this)' name='"+thisName+"'>"+thisValue+"</em>");
                        var txbTag = document.getElementById("tagValue");
                        if (txbTag.value == '') {
                            txbTag.value += thisValue;
                        }
                        else {
                            txbTag.value += "," + thisValue;
                        }
                        $(_this).unbind('click');
                }
  • 相关阅读:
    easyui 之ComboTree 用法Demo
    sql like in 语句获取以逗号分割的字段内的数据
    基于Lumisoft.NET组件的POP3邮件接收和删除操作
    如何在滚动报表时保持标题可见 (Reporting Services)
    5个最顶级jQuery图表类库插件-Charting plugin
    无限极分类查询
    JS编码,解码. asp.net(C#)对应解码,编码
    JQuery.Ajax之错误调试帮助信息
    项目经理需要具备的11项人际关系软技能
    jquery easyui DataGrid 动态的改变列显示的顺序
  • 原文地址:https://www.cnblogs.com/djdliu/p/5484840.html
Copyright © 2020-2023  润新知