我正在创建一个带有上,下箭头的待办事项列表,以便能够替换它们,但是有一个问题,在我向列表中添加新任务后,每次都会将其移到越来越多的位置。
您能帮我吗?
这是我的 JS
var count = 3;
add_task(); // CALLING ADD TASK FUNCTION
delete_task(); // CALLING DELETE TASK FUNCTION
function add_task() {
$('.add-new-task').submit(function(){
var new_task = $('.add-new-task input[name=new-task]').val();
var date = $('.add-new-task input[name=date]').val();
count = count + 1;
var print = '<li><span>' + new_task + ' <em>' + date + '</em></span><a class="up" href="#"><i class="fa fa-chevron-up"></i></a><a class="down" href="#"><i class="fa fa-chevron-down"></i></a><button id="' + count + '" class="delete-button"><i class="fa fa-times"></i></button></li>';
if(new_task !== ''){
$('.add-new-task input[name=new-task]').val('');
$(print).appendTo('.container ol').hide().fadeIn();
delete_task();
}
return false;
});
}
//===================== FUNCTION TO DELETE A TASK =============================
function delete_task() {
$('.delete-button').click(function(){
var current_element = $(this);
var id = $(this).attr('id');
current_element.parent().fadeOut("fast", function() { $(this).remove(); });
});
// ===================== MOVING UP A TASK ON CLICK =============================
var upLink = document.querySelectorAll(".up");
for (var i = 0; i < upLink.length; i++) {
upLink[i].addEventListener('click', function () {
var wrapper = this.parentElement;
if (wrapper.previousElementSibling)
wrapper.parentNode.insertBefore(wrapper, wrapper.previousElementSibling);
});
}
// ===================== MOVING DOWN A TASK ON CLICK =============================
var downLink = document.querySelectorAll(".down");
for (var i = 0; i < downLink.length; i++) {
downLink[i].addEventListener('click', function () {
var wrapper = this.parentElement;
if (wrapper.nextElementSibling)
wrapper.parentNode.insertBefore(wrapper.nextElementSibling, wrapper);
});
}
}
不知道是什么问题