这段代码实现了一个JavaScript交互功能，允许用户点击列表元素使其在列表中上下移动，以及删除选中的元素。点击事件通过jQuery绑定到按钮上，通过检查元素是否存在以及其位置来执行相应的操作。当尝试将元素移到顶部或底部时，会进行边界检查以防止超出范围。
$(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('请选择要删除的元素');
}
});
})
扫一扫
1417
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
