在待办事项清单中移动任务时出现问题

时间:2019-12-16 20:33:48

标签: javascript jquery

我正在创建一个带有上,下箭头的待办事项列表,以便能够替换它们,但是有一个问题,在我向列表中添加新任务后,每次都会将其移到越来越多的位置

您能帮我吗?

这是我的 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);
    });
}


}

不知道是什么问题

0 个答案:

没有答案