jquery 关于动态删减选项卡(包含排序和禁止重复添加选项卡)

总体比较low 主要是想实现效果,自己做的遇到的最大的问题就是如何禁止重复添加选项卡,后来看了别人的插件的写法,才发现原来return false 可以中止函数的运行,达到禁止添加的效果,个人基础比较差,现在才了解到。

css

<style>
        .select-val {
            width: 500px;
            height: 40px;
            border: solid 1px black;
        }
        
        .select-list {
            display: none;
        }
        
        .select-val .list-item {
            display: inline-block;
            margin: 10px 20px;
            background: red;
            cursor: pointer;
        }
        
        .select-val .list-item::after {
            content: "x";
        }
    </style>

html

<div class="custom-select">
        <div class="select-val">

        </div>
        <div class="select-list">
            <div class="list-item" data-val="1">
                一班
            </div>
            <div class="list-item" data-val="2">
                二班
            </div>
            <div class="list-item" data-val="3">
                三班
            </div>
            <div class="list-item" data-val="4">
                四班
            </div>
            <div class="list-item" data-val="5">
                五班
            </div>
        </div>
    </div>

js

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
</script>
<script>
    $(function() {
        //下拉框的展开和收起
        $(".select-val").click(function() {
            $('.select-list').toggle()
        })

        //封装动态添加标签的函数
        function add(name, val) {
            var add_li = $('<div class="list-item" data-val="' + val + '">' + name + '</div>')
            $('.select-val').append(add_li);
        }

        //给每一个下拉的选项增加点击事件  整个js运用的都是事件委托。
        $('body').on("click", ".select-list .list-item", function() {
            var texts = $(this).text();
            var data_val = $(this).attr('data-val');
            var showList = $('.select-val .list-item');
            var number = $('.select-val .list-item').length;


            //进行for循环判断,如果有该选项,则return false
            //return false 可以中止函数执行!!!!!!
            for (var i = 0; i < showList.length; i++) {
                if (showList.eq(i).text() == texts) {
                    $('.select-list').hide();
                    alert("你已经添加了该选项")
                    return false;
                }
            }
            if (number < 5) {

                //执行动态添加数据的方法
                add(texts, data_val);
            } else if (number == 5) {
                alert("选项最多只能是五个,请删除其他,再进行选择")
                return false;
            }
            $('.select-list').hide();

            var domAll = $('.select-val .list-item');
            //获取dom元素,然后对dom元素根据属性值来排序
            domAll = domAll.sort(function(a, b) {
                var valveNumOfa = $(a).attr("data-val")
                var valveNumOfb = $(b).attr("data-val")
                if (parseInt(valveNumOfa) < parseInt(valveNumOfb)) {
                    return -1;
                } else {
                    return 1;
                }
            })

            //重新渲染该dom元素
            $('.select-val').html(domAll)
        })

        //添加点击事件,这里要进行阻止冒泡,否则会让事件并发。
        $('body').on('click', '.select-val .list-item', function(event) {
            event.stopPropagation();
            $(this).remove();
            $('.select-list').hide();
        })
    })
</script>

我认为dom的渲染还是有问题的,虽然效果实现了,但其实内部的代码还可以完善,但是不知道具体的逻辑办法,希望沟通交流,谢谢。

效果图
在这里插入图片描述

发布了8 篇原创文章 · 获赞 0 · 访问量 169
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览