layui框架实战案例(28):掌握多标签选中和取消的核心技巧

HTML结构

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header" style="text-align: center;font-weight: bold;">系统标签</div>
        <div class="layui-card-body">
            <div style="margin-bottom: 20px;">
                <p style="font-weight: bold;">标签说明：</p>
                <p>1.在“用户标签”添加标签；</p>
                <p>2.添加用户标签后，会自动关联学习交流中技术小组的标签关联，并成为小组成员；</p>
                <p>3.取消用户标签后，会自动取消学习交流中技术小组的标签关联，并取消小组成员；</p>
            </div>
            <div id="optionContainer"></div>
        </div>
    </div>
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form layui-form-pane">
                <div class="layui-card">
                    <div class="layui-card-header" style="text-align: center;font-weight: bold;">用户标签</div>
                    <div class="layui-card-body">
                        <div class="layui-form-item">
                            <textarea name="user_tags" id="user_tags" class="layui-textarea" lay-verify="required" readonly>资质证明,中医,精准</textarea>
                        </div>

                        <div class="layui-form-item">
                            <input type="hidden" id="user_id" value="938">
                            <a class="layui-btn layui-btn-fluid" lay-filter="save" id="L_add" lay-submit=""> 提交信息 </a>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

js计算逻辑

var optionHtml = '';
        var options = option.split(",");
        for (var i = 0; i < options.length; i++) {
            if (tags.includes(options[i])) {
                optionHtml += '<button class="layui-btn layui-btn-sm layui-btn-normal option-btn" data-value="' + options[i] + '">' + options[i] + '</button>';
            } else {
                optionHtml += '<button class="layui-btn layui-btn-sm layui-btn-primary option-btn" data-value="' + options[i] + '">' + options[i] + '</button>';
            }
        }
        // 将生成的选项HTML结构添加到页面中
        $('#optionContainer').html(optionHtml);

        //选项按钮绑定点击事件
        $('.option-btn').click(function () {
            var selectedValue = $(this).data('value');
            var currentInputValue = $('#user_tags').val();//获取用户标签
            //改变标签颜色
            if ($(this).hasClass('layui-btn-primary')) {
                //新增标签
                $(this).removeClass('layui-btn-primary').addClass('layui-btn-normal');
                if (currentInputValue) {
                    var values = currentInputValue.split(',');
                    if (values.indexOf(selectedValue) === -1) {
                        $('#user_tags').val(currentInputValue + ',' + selectedValue);
                    }
                } else {
                    $('#user_tags').val(selectedValue);
                }
            } else {
                //取消选中
                $(this).removeClass('layui-btn-normal').addClass('layui-btn-primary');
                var newLabel = replaceTags(currentInputValue,selectedValue);
                $('#user_tags').val(newLabel);
            }
        });

---

@漏刻有时