zoukankan      html  css  js  c++  java
  • 添加span或删除span例子

    今天公司项目中遇到这个问题在此给大家分享一下:
    1.Css部分
    <style type="text/css">
            #bqzhi b{border:1px solid #EAD483;font-weight:normal;margin:3px; background-color:#FEF6CE; cursor:pointer; padding:5px 5px 3px 5px;height:auto;overflow:hidden;}
            #ysbq{ clear:both;border:1px solid #b8dcea;height:auto;overflow:hidden;531px;}
            #yushebq{padding:5px 10px 5px 10px;}
           .yushebq1{font-weight:normal;margin:3px; background-color:#e1ecf4;color:#518ca8; cursor:pointer; padding:5px 5px 3px 5px;height:auto;overflow:hidden;}
            .yushebq2{font-weight:normal;margin:3px; background-color:#EAD483;color:#000; padding:5px 5px 3px 5px;height:auto;overflow:hidden;}
        </style>
    2.脚本部分
    <script> 
     function tieshang() {
                var txtbq = $.trim($("#bqian").val());
                if (txtbq.length != 0) {
                    var a = false;
                    $("#bqzhi b").each(function () {
                        if ($(this).html() == txtbq) {
                            a = true;
                            return;
                        }
                    })
                    if (!a) {
                        $("#bqzhi").append('<b>' + txtbq + '</b>');
                        bindListener();
                        updatehidden();
                    }

                }
            }
            $(function () {
                $("#yushebq b").click(function () {
                    //var yushe = $(this).text();
                    if (!$(this).hasClass("yushebq2")) {
                        // 为新元素节点添加事件侦听器
                        $("#bqzhi").append('<b>' + $(this).html() + '</b>');
                        bindListener();
                        updatehidden();
                    }
                    $(this).removeClass("yushebq1").addClass("yushebq2");
                });
            })
            $(document).ready(function () {
                bindListener();
            })
            // 用来绑定事件(使用unbind避免重复绑定)
            function bindListener() {
                $("#bqzhi b").unbind().click(function () {
                    $(this).remove();
                    updatehidden();
                    var result = $(this).html();
                    $("#yushebq b").each(function () {
                        if ($(this).html() == result) {
                            $(this).removeClass("yushebq2").addClass("yushebq1");
                        }
                    })
                })
            }
            function updatehidden() {
                var toid = "";
                $("#bqzhi b").each(function () {
                    toid += $(this).html() + ",";
                });
                toid = toid.substring(0, toid.lastIndexOf(","));
                $("#Toid").val(toid);
            }
        </script>
    3.页面html部分
    <ul class="clr" style="height: auto; overflow: hidden;">
    <li class="spL">标签:</li>
    <li style=" 533px; margin-top: 6px;height: auto; overflow: hidden;">
    <div id="bqzhi"></div>
    <div id="tjbqid"style="clear:both;70px;height:26px;margin:3px 3px 6px 3px;cursor:pointer;">
    <img alt="" onclick="tjbq()" src="/xh/images/tjbqs.jpg" /></div>
    <div id="ysbq" style="display:none; margin:3px 0px 6px 0px;">
    <div style="background:url(/xh/images/bqbj.jpg) no-repeat; 531px;height:43px;">
    <ul style="border:0px;">
    <li style="height:23px;235px;margin-left:12px;_margin-left:6px;color:Black;font-size:15px;font-weight:bold;padding-top:20px;text-align:center;">添加鲜花的标签</li>
    <li style="height:30px;176px;padding:13px 0px 0px 10px;">
    <input style="172px;" type="text" id="bqian" name="bqian" />
    </li>
    <li style="height:30px;55px;margin-left:10px;padding-top:13px"">
    <img alt=""style="cursor:pointer;" src="/xh/images/tieshang.jpg" onclick="tieshang()"/>
    </li><li style="height:43px;20px;margin-left:10px;">
    <img alt="" onclick="guanbi()" style="cursor:pointer;" src="/xh/images/guanbi.jpg" />
    </li></ul></div>
    <div id="yushebq"><b class="yushebq1">预设标签5</b>
    <b class="yushebq1">预设标签1</b>
    <b class="yushebq1">预设标签2</b>
    <b class="yushebq1">预设标签3</b>
    <b class="yushebq1">预设标签6</b>
    <b class="yushebq1">预设标签7</b>
    <b class="yushebq1">预设标签4</b>
    </div></div></li></ul>
    html部分发布之后可能样式比较难看,能看懂个意思就行了
  • 相关阅读:
    luogu P1075 质因数分解
    luogu P1146 硬币翻转
    [HEOI2013]SAO
    [HAOI2010]软件安装
    [CodeForces-763C]Timofey and remoduling
    [CodeForces-375E]Red and Black Tree
    [CodeForces-178F]Representative Sampling
    [CodeForces-55D]Beautiful Numbers
    [AHOI2009]同类分布
    [ZJOI2010]数字计数
  • 原文地址:https://www.cnblogs.com/zpc870921/p/2640544.html
Copyright © 2011-2022 走看看