jQuery实现元素的上移下移删除

Html

Css


    01 粮油
    02 酒类
    03 洗护
    04 食品


    上移
    下移
    删除

ul li {
	width:120px;
	line-height:30px;
	list-style:none;
}
ul .on {
	background:#eee;
}
div a {
	display:block;
	width:80px;
	height:30px;
	line-height:30px;
	border:1px solid #ccc;
	color:#333;
	text-align:center;
}

$(function() {
    $('ul li').on('click', function() {
        $(this).toggleClass('on').siblings().removeClass('on');
    });

/*上移*/
    $('.btn1').on('click', function() {
        var txt = $('ul .on').children('span').html();
        var txt1 = $('ul .on').prev().children('span').html();
        var prev = $('ul .on').prev();
        if ($('ul .on').length == 1) {
            if (prev.length) {
                $('ul .on').children('span').html(txt1);
                prev.children('span').html(txt);
                prev.addClass('on').siblings().removeClass('on');
            } else {
                alert('已经在最顶端了');
            };
        } else {
            alert('请选择要上移的元素');
        };
    });

/*下移*/
    $('.btn2').on('click', function() {
        var txt = $('ul .on').children('span').html();
        var txt1 = $('ul .on').next().children('span').html();
        var next = $('ul .on').next();
        if ($('ul .on').length == 1) {
            if (next.length) {
                $('ul .on').children('span').html(txt1);
                next.children('span').html(txt);
                next.addClass('on').siblings().removeClass('on');
            } else {
                alert('已经在最底端了');
            };
        } else {
            alert('请选择要下移的元素');
        };
    });

/*删除*/
    $('.btn3').on('click', function() {
        if ($('ul .on').length == 1) {
            $('ul .on').hide();
        } else {
            alert('请选择要删除的元素');
        }
    });
})

↑上面代码改变，会自动显示代码结果 jQuery调用版本：2.1.4

立即下载

jQuery实现元素的上移下移删除



代码描述：使用jQuery来实现元素的上移下移删除

html静态页面实现元素的上移或下移,简单的说就是上下两个元素换一下位置,替换彼此的html内容.
首先,我们要获取上下两个元素的html内容;
然后在判断当前选中的内容是否位于列表的最顶部或最底部,从而判断它是否能上移或下移;
当然最重要的是我们必须先选中元素,否则不能实现上移或下移;
元素删除就简单了,选中元素时让它隐藏就可以,这只是静态的;

1

最新

发表评论全部评论

暂时没有评论！

过去式？将来时？0

2017/4/19 16:48:07

感觉少了个添加，修改这样就相当于一个数据词典了修改
回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

樱花盛开的季节??

相关代码

jQuery实现元素的上移下移删除

最新