首页 前端知识 jQuery实现上移、下移、置底、置顶、新增删除按钮的显示隐藏

jQuery实现上移、下移、置底、置顶、新增删除按钮的显示隐藏

2024-07-20 17:07:09 前端知识 前端哥 395 321 我要收藏

话不多说上代码!

HTML代码

<div class="demo">
     <div class="item">
            001
            <button>+</button>
            <button>-</button>
            <button class="up">↑</button>
            <button class="down">↓</button>
            <button class="top">置顶</button>
            <button class="bottom">置底</button>
     </div>
     <div class="item">
            002
            <button>+</button>
            <button>-</button>
            <button class="up">↑</button>
            <button class="down">↓</button>
            <button class="top">置顶</button>
            <button class="bottom">置底</button>
     </div>
     <div class="item">
            003
            <button>+</button>
            <button>-</button>
            <button class="up">↑</button>
            <button class="down">↓</button>
            <button class="top">置顶</button>
            <button class="bottom">置底</button>
     </div>
     <div class="item">
            004
            <button>+</button>
            <button>-</button>
            <button class="up">↑</button>
            <button class="down">↓</button>
            <button class="top">置顶</button>
            <button class="bottom">置底</button>
     </div>
</div>

js代码

 $(document).ready(function(){
    // 用于控制+-,第一行永远显示+   其他行显示-
    function sort() {
        $(".item").each(function(index, e) { // 循环item
            if(index==0){ // 下标为0时
                $('.item').eq(index).find('button').eq(0).show(); // +显示
                $('.item').eq(index).find('button').eq(1).hide(); // -隐藏
            }else{ // 其他情况
                $('.item').eq(index).find('button').eq(0).hide(); // +隐藏
                $('.item').eq(index).find('button').eq(1).show(); // -显示
            }
        });
    }
    sort()
    $(document).on('click', 'button',function(event) { // 给button加点击事件
        event.preventDefault; // 该方法将通知 Web 浏览器不要执行与事件关联的默认动作,阻止表单提交
        var parent = $(this).parent(); // 拿到父级
        var parents = $(this).parents(".demo"); // 拿到祖先叫demo的元素
        var length = parents.children().length; // 拿到demo子级的长度
        if (($(this).is(".up") || $(this).is(".top")) && parent.index() == 0) { // 点击上移或者置顶,并且父级下标为0时,说明已位于最顶端
            alert("已位于最顶端!");
            return false;
        } else if (($(this).is(".down") || $(this).is(".bottom")) && parent.index() == length - 1) { // 点击下移或者置底,并且父级下标等于demo的长度-1时(-1是因为下标从0开始),说明已位于最底端
            alert("已位于最底端!");
            return false;
        }
        switch (true) {
            case $(this).is(".up"): // 点击上移
                var prev = parent.prev(); // 获取同胞元素的上一个元素
                parent.insertBefore(prev); // 将它插入到当前元素之后,实现当前元素上移
                break;
            case $(this).is(".down"): // 点击下移
                var next = parent.next(); // 获取同胞元素的下一个元素
                parent.insertAfter(next); // 将它插入到当前元素之前,实现当前元素下移
                break;
            case $(this).is(".top"): // 点击置顶
                parents.prepend(parent); // 在parents元素(子级)的开头插入parent
                break;
            case $(this).is(".bottom"): // 点击置底
                parents.append(parent); // 在parents元素(子级)的结尾插入parent
                break;
        }
        sort() // 重新排序
    })
});

转载请注明出处或者链接地址:https://www.qianduange.cn//article/14059.html
标签
评论
发布的文章

HTML5 移动开发秘籍(一)

2024-08-05 23:08:12

【HTML5系列教程】

2024-08-05 23:08:12

HTML5面试题

2024-08-05 23:08:06

JQuery基础---01

2024-08-05 23:08:34

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!