zoukankan      html  css  js  c++  java
  • 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');
                }
  • 相关阅读:
    Shell中的特殊变量和结构
    自由的Debian
    关于系统定制的一些链接
    超出两行显示省略号
    json转换
    区分LocalStorage和偏好数据
    去除谷歌浏览器中的默认文本框样式
    js访问xml
    js执行跨域请求
    mvc通过controller创建交互接口
  • 原文地址:https://www.cnblogs.com/djdliu/p/5484840.html
Copyright © 2011-2022 走看看