Question

我正在处理包含表单和列表的Web应用程序（待办事项列表）。每次用户提交表单时，提交的项目将作为li添加到列表中。我知道如何将列表项添加到ul。我的问题是我希望能够将新添加的li格式化为前一个。我正在使用bootstrap来完成项目，bootstrap有自己的预定义类。所以我想在这些课程中添加新的li。这是在线网络应用http://pctechtips.org/apps/todo/ 这就是单个li的样子，所以当添加新的li时，我想知道如何保持相同的格式

<li class="list-group-item d-flex justify-content-between align-items-center">
Morbi leo risus
<i class="fa fa-trash-o" aria-hidden="true"></i>
</li>

//javascript file


//variables
//todoList array to hold (title, description) for every todo tiem
var todoList = [{
    title: "Buy Groceries",
    desc: "go to win-dixie and buy bread, ham, and cheese"
  },
  {
    title: "Pay Car Insurance",
    desc: "call State Farm and pay year insureance"
  },
  {
    title: "Do this",
    desc: "this is another todo item description"
  }
]

/*
 * Script main body
 */
$(document).ready(function() {
  //hide form when doc loads first time
  $("#submit-form").hide();

  //listener for show hide form functionality
  $("#add-todo").click(function() {
    toggleForm();
    return false; //return false to prevent page reload
  });

  //listener for add new item form (submit button)
  $(".btn").click(function() {
    console.log("submit item");
    addToList();
  });
});

//functionality for show / hide form
function toggleForm() {
  if ($("#submit-form").is(":hidden")) {
    console.log("form exapnded");
    $("#submit-form").show("slow");
    $("#form-icon").removeClass("fa-plus-square-o");
    $("#form-icon").addClass("fa-minus-square-o");
  } else {
    console.log("form hidden");
    $("#submit-form").hide("slow");
    $("#form-icon").removeClass("fa-minus-square-o");
    $("#form-icon").addClass("fa-plus-square-o");
  }
}

//add new item to todo list items
function addToList() {
  //getting data from input fields
  var todoTitle = $("#todo-title").val();
  var todoDesc = $("#todo-desc").val();
  //checking user input
  if (todoTitle == null || todoDesc == null) {
    alert("fill in all fields!");
  } else {
    console.log(todoTitle + "\n" + todoDesc);
    //adding new li to ul   
    var ul = document.getElementById("list");
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(todoTitle));
    ul.appendChild(li);
    // li.innerHtml = "<li class="list-group-item d-flex justify-content-between align-items-center">"+todoTitle+"<i class="fa fa-trash-o" aria-hidden="true"></i></li>"

  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<!-- index.html -->

<!DOCTYPE html>
<html>

<head>
  <title>TodoList App</title>
  <!-- bootstrap, fontawsome cdn -->
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <!-- local stylesheet -->
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <!-- jquery cdn -->
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <!-- local javascript -->
  <script type="text/javascript" src="js/todo.js"></script>

</head>

<body>
  <!-- navbar -->
  <nav class="navbar navbar-expand-lg navbar-drak bg-dark mb-4">
    <a class="navbar-brand" href="#"><i class="fa fa-thumb-tack" aria-hidden="true"></i> Todo<strong>List</strong></a>
  </nav>
  <!-- /navbar -->
  <!-- todoList -->
  <div class="container">
    <div class="add-item text-white text-center col-sm-12 col-md-10 col-lg-8 mb-4">
      <a id="add-todo" class="new-todo text-white text-center" href=""><i id="form-icon" class="fa fa-plus-square-o" aria-hidden="true"></i> Enter new todo item</a>
      <div id="submit-form" class="form-hide text-center col-sm-12 col-md-12 col-lg-8">
        <form class="">
          <div class="form-group">
            <input type="text" class="form-control" id="todo-title" placeholder="Todo Title">
          </div>
          <div class="form-group">
            <input type="text" class="form-control" id="todo-desc" placeholder="Todo Description">
          </div>
          <button type="button" class="btn btn-primary btn-lg col-12">Submit Todo</button>
        </form>
      </div>
      <!-- horizontal line -->
      <hr>
      <!-- list items -->
      <h1 class="heading-4">Todo List Items</h1>
      <ul id="list" class="list-group mt-4 pb-4">
        <li class="list-group-item d-flex justify-content-between align-items-center">
          <i class="fa fa-plus-square-o" aria-hidden="true"></i> Pay Car Insurance
          <i class="fa fa-pencil" aria-hidden="true"></i>
          <i class="fa fa-trash-o" aria-hidden="true"></i>
        </li>
        <li class="list-group-item d-flex justify-content-between align-items-center">
          Dapibus ac facilisis in
          <i class="fa fa-trash-o" aria-hidden="true"></i>
        </li>
        <li class="list-group-item d-flex justify-content-between align-items-center">
          Morbi leo risus
          <i class="fa fa-trash-o" aria-hidden="true"></i>
        </li>
      </ul>
    </div>
  </div>
</body>

</html>

Answer 1

您正在使用Jquery。所以你可以用它来添加类和附加子元素。

var ul = document.getElementById("list");
var li = document.createElement("li");

$(li).addClass("list-group-item d-flex justify-content-between align-items-center");
$(li).append(document.createTextNode(todoTitle));
$(li).append(($('<i class="fa fa-trash-o" aria-hidden="true"></i>')));

我唯一添加的是addClass（）方法和append（）方法来添加所需的类并附加垃圾桶图标。

点击此处的小提琴：Fiddle

希望它有所帮助！

Answer 2

在添加新li之前，您可以执行此操作以匹配类：

$previous = $(ul.children[ul.children.length-1]);
$(li).attr('class', $previous.attr('class'));

复制垃圾桶：

$('i', $previous).clone().appendTo(li);

这需要在addToList()

之前.appendChild(li)执行

如何在Javascript

2 个答案: