为每项任务添加优先颜色？ jQuery的待办事项列表

Question

我一直在努力的Todo列表类型的应用程序与添加，编辑，删除任务的能力。我一直在试图添加一个优先级类型的功能，它只是不工作。提交按钮旁边是一个三种不同颜色的圆圈，代表任务的优先级。到目前为止，我可以点击它并看到3个选项 - 但是当我点击“添加”或“输入”时，当颜色填充框任务时，我无法使其工作。我可以看到三种颜色，当我点击其中一项时，输入任务，但颜色不显示。

Codepen版本在这里：https://codepen.io/BabinecJ/pen/XRbwog

代码：

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/> 

    <div id="todo"> 
     <h3><u>To-Do List<u></h3> 



     <form action="#" id="todo-form"> 
      <input type="text" placeholder="To-do" name="todo" id="todo-input"/> 

      <input type="submit" value="Add"/> 

      <div class="priorities"> 
      <button class="choose-priorety low"></button> 

    <ul class="priorities-list"> 

<li class="priority"><button class="low"></button></li> 

    <li class="priority"><button class="medium"></button></li> 

    <li class="priority"><button class="high"></button></li> 
     </div> 

     </ul> 


      </form> 




     <div class="tasks-parent"> 
      <ul id="tasks-parent li"> 
      </ul> 

      <h4>Tasks:</h4> 
      <ul class="tasks"> 
      </ul> 

      <br> 
      <input type="checkbox" id="toggle-all"/> <p class="check-all-text"> check all </p> 
<br> 
<br> 
<button type="checkbox" id="clearCompleted" value="clearCompleted">Clear completed</button> 
     </div> 
    </div> 

CSS：

*{ 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
} 

html { 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    line-height: 1; 
} 

ol, ul { 
    list-style: none; 
} 

#todo { 
    position: absolute; 
    left: 50%; 
    width: 400px; 
    margin-left: -200px; 

} 
#todo h3{ 
    padding: 10px 5px; 
} 
#todo h4{ 
    padding: 10px 0; 
} 

.tasks-parent { 
    border: solid 2px #777; 
    margin: 5px; 
    padding: 5px; 
    border-color: black; 

} 


.tasks-parent li { 
    width: 90%; 
    background: #adadad; 
    padding: 10px 20px; 
    margin: 1px 0; 
    overflow: hidden; 

} 


#todo #todo-form input{ 
    padding: 3px; 
    border: solid 2px #888; 
    margin: 0 0 0 5px; 
    width: 200px; 
} 

#todo #todo-form input[type=submit]{ 
    text-transform: uppercase; 
    background: #22B473; 
    border: none; 
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
    border-radius: 3px; 
    font-weight: bold; 
    color: #FFF; 
    padding: 3px 10px; 
    cursor: pointer; 
    width: auto; 
} 
.tasks{ 
    width: 100%; 
    list-style: none; 
} 
.tasks .check{ 
    color: #98FB98;; 
    width: 20px; 
    cursor: pointer; 
} 
.tasks .todo-name{ 
    width: 250px; 
} 


#toggle-all { 
    position: relative; 
    top: 0px; 
    left: 0px; 
    width: 40px; 
    height: 25px; 
} 


#todo-list li toggle 
{ 
    text-align: center; 
    width: 40px; 
    height: auto; 
    position: absolute; 
    top: 100; 
    bottom: 100; 
    margin: auto; 
    appearance: none; 

} 

li{ 

    color: red; 
} 

li .destroy:after { 
    content: '×'; 
} 


#clearCompleted { 

    margin-bottom: 5px; 
    color: green; 
    border: solid; 
    width: 50%; 

} 


.check-all-text { 

    font-size: 15px; 


} 



.stroked { 
    text-decoration: line-through; 

} 

@keyframes stroked { 
    from { text-decoration-color: transparent; } 
    to { text-decoration-color: auto; } 
} 

.priorities { 
    position: relative; 
    width: 20%; 
    float: right; 
    text-align: center; 
} 

.priorities button { 
    -moz-border-radius: 50%; 
    -webkit-border-radius: 50%; 
    border-radius: 50%; 
    width: 20px; 
    height: 20px; 
    border: 3px #333 solid; 
    margin-left: -5px; 
} 

.priorities .priorities-list { 
    position: absolute; 
    top: 100%; 
    display: none; 
} 

.priorities .priority { 
    display: inline-block; 
} 

.low { 
    background: green; !important; 
} 

.medium { 
    background: #f93 !important; 
} 

.high { 
    background: #f30 !important; 
} 

JS：

$(function() { 
    function addItem() { 
    // append to the list 
    $(".tasks").append('<li><input type= "checkbox" class="toggle" /><span>' + $("#todo-input").val() + '</span> <small><a href="#edit">Edit</a> &bull; <a href="#delete">Delete</a></small></li>'); 

    // clear the text 
    $("#todo-input").val(""); 
    } 





    ///// Check all boxes 

    $("#toggle-all").click(function() { 
    $('input:checkbox').not(this).prop('checked', this.checked); 
}); 


    //strike-through text when box checked, unstrike when unchecked. 


    $(document).on("click", '.toggle', function() { 
    if ($(this).closest("li").find("span").css('textDecoration') === 'line-through') { 
      $(this).closest("li").find("span").css('textDecoration', 'none'); 
    } else { 
     $(this).closest("li").find("span").toggleClass('stroked'); 

    } 
    }); 




    $("#todo").keydown(function (e) { 
    // if enter key pressed 
    if (e.which == 14) 
     addItem(); 
    }); 
    // on clicking the add button 
    $('#todo-form').on('submit',function(e) { 
    e.preventDefault(); 
    addItem(); 
    }) 
    // delegate the events to dynamically generated elements 
    // for the edit button 
    $(document).on("click", 'a[href="#edit"]', function() { 
    // make the span editable and focus it 
    $(this).closest("li").find("span").prop("contenteditable", true).focus(); 
    return false; 
    }); 


    /// Delete all checked boxes 

    $(document).on("click", '#clearCompleted', function() { 
    $(".toggle:checked").each(function() { 
    $(this).closest("li").remove(); 
    }); 
}); 



    $(document).ready(function() { 

    var $addForm = $('#todo-form'); 
    var $taskInput = $addForm.find('#todo-input'); 
    var $todoList = $('.tasks-parent li'); 
    var fadeSpeed = 300; 

    }) 



     //priorities btn 
    var $prioritiesContainer = $('.priorities'); 
    var $prioritiesList = $prioritiesContainer.find('.priorities-list'); 
    var $choosePriorityBtn = $prioritiesContainer.find('.choose-priorety'); 
    var $prioritiesBtns = $prioritiesContainer.find('.priority button'); 

    $choosePriorityBtn.on('click',function() { 
    $prioritiesList.toggle(); 
    }); 
    $prioritiesBtns.on('click',function() { 
    $choosePriorityBtn.removeClass('low medium high').addClass($(this).attr('class')); 
    $prioritiesList.hide(); 
    }); 








    // for the delete button 
    $(document).on("click", 'a[href="#delete"]', function() { 
    // remove the list item 
    $(this).closest("li").fadeOut(function() { 
     $(this).remove(); 
    }); 
    return false; 
    }); 
}); 

Answer 1

我看到了很多回发的。我给你的提交按钮的ID和我注释掉的形式，改变了事件：

$('#add-task').on('click',function(e) { 
    e.preventDefault(); 
    addItem(); 
}) 

我还添加了一个ID，你的提交按钮，并把它称为add-task。对不起，如果这弄乱了你的一些样式。

你addItem功能更改为：

function addItem() { 

//get class 
var priority_class = $('.choose-priorety') 
.clone() 
.removeClass('choose-priorety') 
.attr('class'); 

// append to the list 
$(".tasks").append('<li class="' + priority_class + '"><input type= "checkbox" class="toggle" /><span>' + $("#todo-input").val() + '</span> <small><a href="#edit">Edit</a> &bull; <a href="#delete">Delete</a></small></li>');   

// clear the text 
$("#todo-input").val(""); 

}

我有点糊涂了，直到我意识到有两个addItem功能。然而你非常接近。希望这可以帮助。