Question

我使用jQuery和Bootstrap创建了一个待办事项列表。当用户点击某个项目时，它会被添加到“已完成”的课程中。并使用CSS将一个删除线添加到类中。如何让受到攻击的物品移到列表的末尾？

这是我尝试过的。查看CodePen以获取完整代码。

  $('ul').on('click', 'li', function() {
    $(this).toggleClass('completed');
    $('.completed').appendTo($(this));
  });

Answer 1

如果您在display: flex上使用ul，则可以将order: 1添加到completed规则中，让CSS负责布局。

Stack snippet

＆＃13;

$(function() {

  let degree = 90;

  // Rotates '+' and drops down or recloses input box on click
  $('.fa-plus').on('click', function() {
    if (degree === 135) {
      degree = 45;
    }
    // Sets CSS transform properties. Selector 'this' refers to '+' (with class '.fa-plus') being clicked
    $(this).css({
      '-webkit-transform': 'rotate(' + degree + 'deg)',
      '-moz-transform': 'rotate(' + degree + 'deg)',
      '-ms-transform': 'rotate(' + degree + 'deg)',
      '-o-transform': 'rotate(' + degree + 'deg)',
      'transform': 'rotate(' + degree + 'deg)',
      'transition': '0.2s linear'
    });
    degree += 45;
    // Animates opacity of text box, setting its display style property to none once its opacity reaches 0 if it's visible, or the inverse if already hidden
    $('input[type="text"]').fadeToggle();
  });

  // Checks off specific items upon click and adds them to class 'completed'
  $('ul').on('click', 'li', function() {
    $(this).toggleClass('completed');
  });

  // Click to delete
  $('ul').on('click', 'span', function(e) {
    // fadeOut() hides element by setting it to transparent
    $(this).parent().fadeOut(500, function() {
      // Removes element along with its data and events
      $(this).remove();
    });
    // Prevents event from bubbling up DOM tree, notifying any parent handlers of it
    e.stopPropagation();
  });

  $('input[type="text"]').on('keypress', function(e) {
    // If user hits enter...
    if (e.which === 13) {
      // Grabs new to-do list item from input
      let itemText = $(this).val();
      // If nothing in input box, ceases function execution
      if (itemText === '') return;
      // Clears input box
      $(this).val('');
      // Creates new li from input and adds to beginning of ul
      $('ul').prepend('<li><span><i class="fa fa-trash"></i></span> ' + itemText + '</li>');
    }
  });

});

＆＃13;

body {
  margin: 0;
  font-family: Roboto, sans-serif;
  background: #642B73;
  background: -webkit-linear-gradient(to right, #C6426E, #642B73);
  background: linear-gradient(to right, #C6426E, #642B73);
}

h1 {
  background: #642B73;
  color: white;
  margin: 0;
  padding: 10px 20px;
  text-transform: uppercase;
  font-size: 20px;
  font-weight: normal;
}

.container {
  margin: 100px auto;
  background: #f7f7f7;
  width: 360px;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.1);
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

li {
  background: white;
  /* distance from the top of the first line of text to the top of the second */
  line-height: 35px;
  color: #666;
  padding: 0 5px 0px 15px;
  position: relative;
  cursor: default; /* Prevents default text cursor */
}

/* Sets color of even li elements */
li:nth-child(even) {
  background: #f7f7f7;
}

input {
  font-size: 1em; /* Text is smaller than li text without this */
  background: #f7f7f7;
  width: 100%;
  height: 35px;
  /* Distance from top of first line of text to top of second */
  line-height: 35px;
  /* Order: top, right, bottom, left */
  padding: 13px 13px 13px 13px;
  /* Includes padding and border in element's total width and height */
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  color: #C6426E;
  border: 3px solid rgba(0, 0, 0, 0);
}

/* Pseudoselector that sets input placeholder text color to match that of li text */
input::placeholder {
  color: #666;
}

/* Sets appearance of input box boundaries when user clicks inside */
input:focus {
  background: white;
  border: 3px solid #642B73;
  outline: none;
}

.completed {
  color: grey;
  text-decoration: line-through;
  order: 1;
}

/* Styles '+' sign. Top property makes element's top edge move above/below its normal position (in this case, lower) */
.fa-plus {
  float: right;
  position: relative;
  top: 4px;
  cursor: pointer;
}

/* Styles Bootstrap trash can icon. Note default is 0px wide (which hovering changes in next CSS ruleset) */
span {
  background: #e74c3c;
  height: 35px;
  width: 0px;
  opacity: 0;
  margin-right: 0px;
  position: absolute;
  /* Sets right edge to right edge of nearest positioned ancestor, li element */
  right: 0;
  text-align: center;
  color: white;
  transition: 0.2s linear;
  cursor: pointer;
}

/* Sets span content (Bootstrap trash can icon) to be 35px wide and fully opaque when upon hover over list item */
li:hover span {
  width: 35px; /* Applies to icon background */
  opacity: 1.0;
}

＆＃13;

<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>To-Do List</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="styles.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <div class="container">
      <h1>To-Do List<i class="fa fa-plus"></i></h1>
      <input type="text" placeholder="Add new">
      <ul>
        <li><span><i class="fa fa-trash"></i></span>Work on projects for one hour</li>
        <li><span><i class="fa fa-trash"></i></span>Go for a walk</li>
        <li><span><i class="fa fa-trash"></i></span>Meditate</li>
        <li><span><i class="fa fa-trash"></i></span>Stretch</li>
      </ul>
    </div>
  </body>
</html>

＆＃13;

将受影响的项目移动到列表末尾

1 个答案: