欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  后端开发

jquery 一个标签选择的实现 请教请教

程序员文章站 2022-05-26 14:40:02
...

现在要做的就是最多可以选择三个标签,选中的标签要在“选择标签”那一栏里面显示。
jquery  一个标签选择的实现    请教请教

标签都是span元素,“选择标签”那一栏是个input。

这个效果该怎么实现呢?请教jquery高手 ,谢谢 ~

回复内容:

现在要做的就是最多可以选择三个标签,选中的标签要在“选择标签”那一栏里面显示。
jquery  一个标签选择的实现    请教请教

标签都是span元素,“选择标签”那一栏是个input。

这个效果该怎么实现呢?请教jquery高手 ,谢谢 ~

假定你这些标签的数据都是从后端渲染的,那么就会有相应的id和值,假设页面渲染出来是这个效果

确定
公司运营 互联网营销 组织变革 招聘/激励 品牌公关 财务/法务
(function ($) { var $labels = $('#labels'); //标签栏 var $input = $('#input'); //输入框 var $certainBtn=$('#certainBtn'); //确定按钮 var data = {};//已选择的数据 var max = 3; //最多选择数目 var activeClass = 'btn-primary'; //选中的active样式 $labels.on('click', 'span', function () { var $this = $(this); var id = $this.data('id'); var value = $this.data('value'); var isSelected = $this.hasClass(activeClass);//是否被选中 //超过数目限制则不做处理 if (!isSelected && Object.keys(data).length >= max) { return; } isSelected ? delete data[id] : data[id] = value; $this.toggleClass(activeClass); renderInput(); }); $certainBtn.click(function () { console.log(data); }); function renderInput() { var values = []; for (var id in data) { values.push(data[id]); } $input.val(values.toString()); //with underscore //$input.val(_.values(data).toString()); } })(jQuery);

采用组件化的思想重新写一个

(function($){
    var labelChoose = {
        el: {
            $labels: $('#labels'),
            $input: $('#input'),
            $certainBtn: $('#certainBtn')
        },
        max: 3,
        data: {},
        activeClass: 'btn-primary',
        init: function (defaultData) {
            var self = this;
            this.renderInit(defaultData); //初始化
            this.el.$labels.on('click', 'span', function (e) {
                self.labelsClick(e);
            });
            this.el.$certainBtn.on('click', function (e) {
                self.certainClick(e);
            });
        },
        labelsClick: function (e) {
            var $this = $(e.currentTarget);
            var id = $this.data('id');
            var value = $this.data('value');
            var isSelected = $this.hasClass(this.activeClass);//是否被选中

            //超过数目限制则不做处理
            if (!isSelected && Object.keys(this.data).length >= this.max) {
                return;
            }

            isSelected ? delete this.data[id] : this.data[id] = value;
            $this.toggleClass(this.activeClass);
            this.renderInput();
        },
        renderLabels: function () {
            var self = this;
            this.el.$labels.find('span').each(function () {
                var $this = $(this);
                var id = $this.data('id');

                for (var idz in self.data) {
                    if (idz === id.toString()) {
                        $this.addClass(self.activeClass);
                    }
                }
            });
        },
        renderInput: function () {
            var values = [];
            for (var id in this.data) {
                values.push(this.data[id]);
            }
            //with underscore
            //this.el.$input.val(_.values(this.data).toString());
            this.el.$input.val(values.toString());
        },
        certainClick: function (e) {
            console.log(this.data);
        },
        renderInit: function (defaultData) {
            this.data = defaultData || {};
            this.renderLabels();
            this.renderInput();
        }
    };

    labelChoose.init({
        '1': '公司运营',
        '2': '互联网营销'
    });
})(jQuery);

由于涉及到数据操作和this绑定,和underscore结合起来使用会比较好点,以上代码仅供参考!

大概要做这么几件事:

1.定义显示被选中的标签的函数
2.在每个标签上设置点击事件

在每次点击标签的时候,把当前的this标签传到1的函数里,append到input的value里。

这种插件自己写的话会很麻烦 建议直接用插件去实现
给你说两个吧 都是我经常用到的:
select2 和 flatui(前端UI框架)

点进去看看文档稍有JQ基础都可以做出你想要的效果。

我再简单描述一下自己写代码要怎么实现:
input框里肯定是要有CSS和JS来控制的
span标签添加点击事件,点击后加个display:none的style(并不是删除 方便在input中点击移除后重新展现)。
假定span有个id叫sp1 input的id叫show,大概的思路是这样的:

$('#sp1').click(function(){
    $(this).css('display','none');
    //获取span中的值复制给input
    $('#show').val($(this).html());
})

span中的值赋值给input久做好了,但是如果在input点击后取消显示就有一些复杂了,你需要定制一些样式,最起码input中的值可以点击并且触发事件。我就说这么多,起到抛砖引玉的作用。

相关标签: jquery html5 php