标签编辑选择效果-html代码-BFW代码库

标签编辑选择效果

代码语言：html

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            $(".show-labelitem").on("click", function() {
                $(this).hide();
                $(".hide-labelitem").show();
                $("#labelItem").show();
            });
            $(".hide-labelitem").on("click", function() {
                $(this).hide();
                $(".show-labelitem").show();
                $("#labelItem").hide();
            });
            $(".label-item").on("click", "li", function() {
                var id = $(this).attr("data");
                var text = $(this).children("span").html();
                var labelHTML = "<li data='"+id+"''>x "+text+"</li>";
                if ($(this).hasClass("selected")) {
                    return false;
                } else if ($(".label-selected").children("li").length >= 5) {
                    alert("最多可以选择5个哦");
                    return false;
                }
                $(".label-selected").append(labelHTML);
                val = '';
                for (var i = 0; i < $(".label-selected").children("li").length; i++) {
                    val += $(".label-selected").children("li").eq(i).attr("data")+',';
                }
                $("input[name='label']").val(val);
                $(this).addClass("selected");
            });
            var val = "";
            $(".label-selected").on("click", "li", function() {
                var id = $(this).attr("data");
                val = '';
                $(this).remove();
                for (var i = 0; i < $(".label-selected").children("li").length; i++) {
                    val += $(".label-selected").children("li").eq(i).attr("data")+',';
                }
                $("input[name='label']").val(val);
                $(".label-item").find("li[data='"+id+"']").removeClass("selected");
            });


            //点击更换标签
            var limit = 0;
            $(".replacelable").on("click", function() {
                layer.load(1);
                limit += 32;
                $.ajax({
                    url: window.location.href,
                    type: "post",
                    datatype: "json",
                    data: {
                        labellimit: limit
                    },
                    success: function(data) {
                        layer.closeAll('loading');
                        $(".label-item").find("li").remove(); //删除原先所有，本来想让数据表随机搜索的，想着有点mmp，就没搞，用的是limit
                        var html = '';
                        for (var i in data) {
                            html += "<li data=\""+data[i].term_id+"\">x<span>"+data[i].name+"</span></li>"; //拼接标签
                        }
                        $(".label-item").append(html); //追加至文档
                    },
                    error: function() {

                        alert("错误~~~");
                    }
                })
            })
            //获取标签
            $("#cell").on("click", function() {
                if ($("input[name='label']").val() == "") {
                    return false;
                } else {
                    alert("标签内容为："+$("input[name='label']").val());
                }
            })

        });
    </script>
    <style type="text/css">
        body {
            padding: 0;
            margin: 0;
            color: #444;
            background: #f2f2f2;
        }
        * {
            padding: 0;
            margin: 0;
            border: 0;
            list-style: none;
            text-decoration: none;
        }
        .wrap {
            width: 100%;
            margin: 10px;
        }
        .label-selected {
            width: 100%;
            min-height: 38px;
            margin: 10px 0;
            border: 1px solid #ccc;
            background-color: #fff;
            position: relative;
        }
        .cell {
            display: block;
            width: 90px;
            height: 28px;
            line-height: 28px;
            border: 3px;
            background: #009688;
            color: #fff;
            text-align: center;
        }
        .label-selected li {
            display:.........完整代码请登录后点击上方下载按钮下载查看