Question

我一直在使用能够添加，编辑和删除任务的Todo列表类型应用。我一直在尝试为其添加优先级类型功能，但它无法正常工作。提交按钮旁边是一个圆圈，有三种不同的颜色，代表任务的优先级。到目前为止，我可以点击它并看到3个选项 - 但是当我点击“添加”时，让颜色填充框填充任务。或者＆＃39;输入＆＃39;，我无法让它发挥作用。我可以看到三种颜色，当我点击一种颜色时，输入任务，但颜色没有显示。

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函数之前，我有点困惑。然而，你非常接近。希望这会有所帮助。

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

1 个答案: